Creating Reducers in Redux

Well, let’s first understand what Redux is and how it can be implemented in your next project. Redux is used with React to allow developers to store all necessary data in their application in a JavaScript object separate from their components. That means with the Redux state, you can grab any part of the data for any component that needs it, by connecting the component.

To access the state to make it available for components to connect to access is provided by wrapping the component tree, similar to Router. This gives you access to Redux functions that allow you to grab state and map it, the props being given to a component. Components can then read these props like normal, as though they were receiving them from a parent component.

If you want to update the data, you must send an action, which is a set of strict instructions you create that Redux will use for how to update it. To update the state we can use pure functions (reducers). Pure functions return value is determined by their input values and they do not have an effect outside of the function.

function reducer(state, action) {
  switch (action.type) {
    case "counter/increment":
      return { count: state.count + 1 };
    case "counter/decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

Reducers and Some Rules

Reducers should follow special rules such as follows:

• They should only calculate the new state value based on the state and action arguments
• They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
• They must not do any asynchronous logic or other “side effects”

A “side effect” is any change to state or behavior that can be seen outside of returning a value from a function. There are some common kinds of side effects:

• Logging a value to the console
• Saving a file
• Setting an async timer
• Making an AJAX HTTP request
• Modifying some state that exists outside of a function, or mutating arguments to a function
• Generating random numbers or unique random IDs (such as Math.random() or Date.now())

If you follow these rules then it will considered a pure function.

Reducers and Updates

In Redux, our reducers are never allowed to mutate the original / current state values. Here are a few reasons why you must not mutate state in Redux:

• It causes bugs, such as the UI not updating properly to show the latest values
• It makes it harder to understand why and how the state has been updated
• It makes it harder to write tests
• It breaks the ability to use “time-travel debugging” correctly
• It goes against the intended spirit and usage patterns for Redux

If you want to change the state then you have to make copies of the original values, and then they can mutate the copies. Also, you want to split you reducers up based on the section of the Redux state that they update. So, it’s best to organize your app folders and files based on features meaning code that relates to a specific concept or area of your app.

I hope this article was helpful to get you started on your first Redux application and as always happy coding.

-JS 👩🏽‍💻