Redux

Eleni Chappen

Redux Lessons for Newcomers

Aug 14 2017

Most of our React projects require managing overall application state. While there are certainly other tools out there that do this, we prefer Redux.

You don't need Redux for everything

When we started using Redux, we had this penchant for putting all of our state into it to provide a consistent way of handling state. This was a mistake because it was total overkill to have to dispatch actions for everything.

As the creator of Redux said -- local state is fine!

Redux is appropriate for data that has to be shared between higher-level/container components. If we think of props in React as data being filtered through a tree of components, Redux allows you to easily transfer data between branches of this tree. That being said, we try our best to ensure that our high-level components have all the information they need to pass, but that's a difficult thing to anticipate as a product changes over time.

UI conditions for components (i.e. showing or hiding a dropdown) should be kept in local state whenever possible. We usually start building a component with state, and if we have to, extract out to Redux as needed.

Break your Redux into manageable chunks (Modules)

For instance, a lot of our projects involve complex, multi-step forms. We've found that separating the form data (the data being collected) from the form mechanics (like what step of the form someone's on), helps keep the Redux data easier to visualize and manage.

One other Redux tip: If you're already using Redux and you're console-logging your state all the time... STOP RIGHT NOW and take advantage of Redux Dev Tools. It makes your debugging so much easier.

Things you may not need but might want to consider using:

Redux Thunk (middleware)

You will inevitably have times where you need to dispatch multiple actions with one action. Redux Thunk allows you to do this.

ImmutableJS

We've been using ImmutableJS intermittently for a while, but this post from Affirm gave us a better understanding of how it can greatly improve your Reducer functions.

Babel Presets

Using a javascript compiler like Babel allows you to take advantage of a lot of new, shiny ES6 and 7 functionality. There are many presets to choose from, but one we've ended up using a lot is Babel's Function Bind Transform preset.

Since we often have to bind functions to their present component's context when defining them as props in React, using ES6's Function Bind operator (::) with this makes code a bit cleaner. So instead of:

<Button  
  text='edit'
  onPress={this.editForm.bind(this)}

you can do:

<Button  
  text='edit'
  onPress={::this.editForm}

Keep in mind that a lot of functionality found in Babel presets is experimental and subject to change. For this reason, we prefer to pick and choose what presets we want to use (listing them out in our .babelrc file), as opposed to using a single preset like any of the 'Stage-X' presets. This way we can be more explicit about the experimental functionality that we're adding to the project, and it takes some of the mystery out of the debugging process.

If you haven't seen it, check out part 1 of this series, React Lessons for Newcomers.