Search code examples
reactjsfluxreactjs-flux

Flux data flow (app with react/flux)


i'm facing a problem could anybody help, i'm coding a flux/react app, and i have a form where i have some input that should update dinamicaly. when i change the first input, i want to call an action (the class action) that communicates with a backend(geting some data from the server), and then return them to the store. then i wanted to update some values in my form from the new data in the store. but i always get this problem. the informations from the store arrive late % to the view rendered. ps: im' listening to the store and evey thing is well. but want the data to come before the second render is done. how?


Solution

  • When dispatching an action with flux, the action should notify the store to update. But then you have to notify the object to update in response to the store being updated, and to do this you must use the setState function of the React Component. (You can also use forceRefresh if you want.)

    Typically, you can build an event-driven structure around the store and register callbacks to the store, and have the store raise an event when the store is updated. The component should subscribe to this store in the ComponentDidMount lifecycle event of the component(, and unsubscribe in the ComponentWillUnmount lifecycle event), in the form of a callback that will call setState with the information passed into the callback from the store; the actions should provide enough information so that the store can efficiently call this callback. A pub/sub model is one way of implementing this, but not the only way.