React＆Redux应用程序设计

Question

I'm new to redux and writing a frontend application that holds a global state which is retrieved on startup via ajax and then updated via poll/push as new data is retrieved. On navigation to each url there's an actor which dispatches to an action which then calls a reducer that overwrites part of the viewState object with a filtered view of this globalState . eg navigation to the url /items/filter/a would adjust the viewState to the following:

state {
     viewState: {
          items: [{id: 1, value: 'a'}]
     }
     globalState: {
          items: [{id: 1, value: 'a'}, 
                  {id: 2, value: 'b'}, 
                  {id: 3, value: 'c']}
     }
}

After this step then ReactDOM.render() is called via another actor and all the components re-render with the updated values in viewState (this isn't my code its straight from the unicorn starter pack)

I'm wondering a) if this is a sensible way to go about structuring an application of this type. and b) what is the best way of initializing the globalState variable on application bootup and then listening for updates (which would potentially then update the viewState if that object with that id is currently in the viewState )

Answer 1

I don't have experience with Redux, since we used plain-vanilla Flux in our project, but we has a similar scenario, and our solution might fit your scenario as well.

Generally I think this is a good strategy for segmenting your global state. There are also libraries that do this (like Facebook Relay for example), that might give you this functionality and more out-of-the-box.

About the rendering of initial state, what we did is set up all of our components to handle an empty data set well, ie if they receive no data (on initial render) they just render empty div s and a loader. Then, when all the data has been retrieved from the server (we use promises for synchronization using the Q library) we fire a BeginRender action, which causes all the stores that are now filled with data to fire a change event. The components subscribed to the stores receive the event and call the store methods to retrieve the data. Once they receive the new data, the component state is updated and the components re-render with the data.