Search code examples
reactjsflux

How should I trigger a UI render update from a state change in a reactjs flux app?


If I'm doing field validation in say a login form field, if it's missing a required field should I trigger the error message in the rendered view by either

a. update this.state.errorMessage in the component and then trigger a render somehow?

OR

b. raise a loginError action, which then updates the store with an errormessage and let that trigger a state update and then the render in the component


Solution

  • Both ways will work. It depends on whether you have other components that should also listen to the changes in your field validation states:

    • If so, then you should do the full flux cycle by calling the loginError action, which will update the stores, causing state changes to properly propagate to all relevant components that cares about the field validation states.

    • If not, where your field validation state changes are localized to just the current component, then it's not wrong to just setState() within the component and only triggers the render() of itself.

    However I recommend that you will do the full flux cycle (action->store->view) since it will be easier to make modifications later.