What is a good recipe for constructing ReactJS components with Redux (action/reducers)?

Question

So, I'm sitting down to create ReactJS components that visualize a page with data and actions (using Redux), but there are a lot of moving parts! What is a good sequence of steps when constructing using React and Redux? It's pretty confusing at this point where to start, and I can't seem to build up code that runs at each step. It seems I have to construct the whole enchilada at once.

First attempt at creating a recipe for constructing React + Redux with components/containers/actions/states:

1. Construct Components first and their hierarchy displaying with dummy data
   • define a dummy data that will become props later
   • define dummy functions or handlers that will become actions later
   • display page with dummy page and components

(the rest of these steps will break compile until all completed...)

2. Define propTypes and getInitialState for each component

   • this will break components
   • map props to data and functions (for actions later)

3. Create wrapper container for root components

   • not done for all components
   • this is still a broken compile state until all pieces added

4. Create actions next

   • still don't have the exact state 'structure' defined this comes next in reducers...
   • action sort-of perform CRUD on my basic data that is really returned in reducers

5. Create reducers

   • take a stab as some ADD or SET action to create initial state data
   • this is using the dummy data defined above
   • create one reducer per one state 'data'

6. Update both action and reducers as needed until state.myData looks good

7. Assemble connect() with reducers...

   • create connect(mapStateToProps, mapDispatchToProps)(wrappedComponent)
   • define mapStateToProps - define JSON for data returned using some state.someData and state.someOtherData
   • define mapDispatchToProps - add action(s) as prop function

8. Now, include reducers into store at top-level

   • let store = createStore(myCombinedReducers)

9. Revisit initial components and check

   • props are covered for incoming data (store state) and functions (really actions)

10. Revisit wrapper containers

    • check mapStateToProps has returning right "data" name
    • note: state data can be used at the component, or here at the mapStateToProps, so it not always obvious at first
    • may need to add additional transform based on filtering,etc
    • check mapDispatchToProps has proper action to function handlers

11. More checks, looking at mapStateToProps and mapDispatchToProps

    • perform search 'state.someData' using Find on Files and check used correctly in all the right places
    • perform search 'functionHandler' using Find on Files and check used in right places

Well, is there a better approach?

Thank you ahead of time!

Answer 1

That was a thorough breakdown! Here are a couple of things I have picked up so far along my own React/Redux journey:

You mention that there are a lot of moving parts. One of the first things to be able to do is to deconstruct the larger application into more manageable parts.

In Thinking in React, the identification of data-flow (or what they refer to as 'Identifying The Minimal Represetation of UI state') is the third step in their process.

For applications where Redux is being used, it is my preference to have the data-flow defined first through the creation of reducers to represent the overall application state.

One approach for defining a reducer is in a TDD approach much like Dan Abramov of Redux creator fame does in this Redux: Writing a Counter Reducer with Tests from his 'Getting Started with Redux series'.

Getting the data-flow working first on gives you a nice platform to work from. All the data-flow logic has been set, all that would be left to do now is to flesh out the components to render the data out.