Skip to main content

Redux Reducers (Part 2): A Practical Example of Creating a Reducer #110

📖 Introduction​

Following our introduction to Redux reducers, this article provides a practical, hands-on example of how to use them in a React application. We will build a simple counter application to demonstrate how to create a reducer and how to use it to update the state in a Redux store.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • All concepts from Part 1 of this series.
  • How to set up a Redux store and connect it to a React application.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Creating a Reducer: How to create a reducer for a simple counter application.
  • ✅ Combining Reducers: How to use the combineReducers function to create a root reducer.
  • ✅ Practical Application: Building a simple counter application that uses a Redux reducer to manage its state.

🧠 Section 1: The Core Concepts of a Counter with a Redux Reducer​

In a Redux application, all state changes are handled by reducers. For our counter application, we will need a reducer that can handle two actions:

  1. Incrementing the count.
  2. Decrementing the count.

We will create a single reducer to manage the state of our counter.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's build our counter application.

2.1 - The counter.js Reducer​

First, let's create a counter.js file in our reducers directory.

// reducers/counter.js
const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

export default counter;

2.2 - The Root Reducer​

Now, let's create a root reducer that combines all of our reducers. In this case, we only have one.

// reducers/index.js
import { combineReducers } from 'redux';
import counter from './counter';

export default combineReducers({
  counter
});

2.3 - The Counter Component​

Now, let's create a component that displays the counter and allows us to increment and decrement it.

// components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

export default Counter;

Step-by-Step Code Breakdown:

  1. useSelector: We use the useSelector hook from react-redux to get the current count from the Redux store.
  2. useDispatch: We use the useDispatch hook to get the dispatch function.
  3. dispatch({ type: '...' }): We call the dispatch function with the appropriate action type when the buttons are clicked.

💡 Conclusion & Key Takeaways​

In this article, we've built a practical example of how to use a Redux reducer in a React application. We've seen how to create a reducer, combine it with other reducers, and use it to manage the state of a simple counter application.

Let's summarize the key takeaways:

  • Reducers are the only place where the state can be updated in a Redux application.
  • The useSelector hook is used to get data from the Redux store.
  • The useDispatch hook is used to dispatch actions to the Redux store.

Challenge Yourself: To solidify your understanding, try to add a "reset" button to the counter that dispatches a RESET action and sets the count back to 0.

➡️ Next Steps​

You now have a solid understanding of how to use Redux reducers. In the next article, "The Redux Store", we will take a deeper dive into the Redux store and learn how to bring actions and reducers together.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • useSelector: A hook provided by react-redux that allows you to extract data from the Redux store state.

Further Reading​