Creating a Reducer for the Checkboard

In this tutorial, we will explore how to create a reducer for a checkboard in a Redux application. We will learn how to use multiple reducers and combine them using the combineReducers function. By the end of this tutorial, you'll be able to create a more dynamic and structured reducer that can be easily integrated into your application.

Introduction

A reducer is a crucial component in Redux that defines how the application's state changes in response to actions. In this tutorial, we will focus on creating a new reducer for a checkboard, which will allow us to build a dynamic board structure. We will also discuss how to manage multiple reducers effectively in a single store.

Step-by-Step Implementation

1. Creating a New Reducer

The first step is to create a new reducer for our checkboard. This reducer will define the initial state and handle the actions related to the checkboard.

const initialState = {
  color1: "black",
  color2: "white",
};

const boardReducer = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

Here, we define an initial state for the board, which includes two colors (color1 and color2). The reducer currently handles no specific actions, so it simply returns the state by default.

2. Combining Reducers

Redux recommends having a single store for the entire application. However, as your application grows, managing everything in a single reducer becomes cumbersome. To address this, Redux provides the combineReducers function, which allows you to split the state management into multiple reducers while keeping a single store.

To combine our boardReducer with other reducers, we use combineReducers as shown below:

import { combineReducers, createStore } from 'redux';
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  board: boardReducer,
  counters: counterReducer,
});

const store = createStore(rootReducer);

In this example, we combine the boardReducer and a counterReducer into a rootReducer. The rootReducer is then used to create the Redux store.

3. Understanding Combined Reducers

The combineReducers function accepts an object where each key represents a slice of the state, and the corresponding value is the reducer responsible for managing that slice. In our example, board and counters are two slices managed by boardReducer and counterReducer, respectively.

This means that the store will now have the following structure:

{
  board: {
    color1: "black",
    color2: "white",
  },
  counters: [/* counter state here */]
}

When an action is dispatched, every reducer receives that action. However, only the reducer that is designed to handle the action will update its part of the state. In our example, if the ADD_COUNTER action is dispatched, the counterReducer will handle it, while boardReducer will simply return the current state without any changes.

4. Adding More Functionality

In the next steps, we can add more functionality to our boardReducer. For example, we could add actions that change the colors of the board dynamically.

const boardReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CHANGE_COLOR':
      return {
        ...state,
        [action.payload.colorKey]: action.payload.colorValue,
      };
    default:
      return state;
  }
};

In this example, we add a CHANGE_COLOR action that allows us to dynamically change the color of the board squares. The action payload contains the key (color1 or color2) and the new color value.

5. Testing the Implementation

After creating the reducer and combining it, it's essential to test it within your application. Make sure to dispatch actions and verify that the state updates correctly.

store.dispatch({
  type: 'CHANGE_COLOR',
  payload: {
    colorKey: 'color1',
    colorValue: 'red',
  },
});

console.log(store.getState().board.color1); // Output: 'red'

Conclusion

In this tutorial, we:

• Created a reducer for the checkboard.
• Learned how to combine multiple reducers using combineReducers.
• Discussed how the combined reducers interact within a single Redux store.

These concepts are fundamental for managing a complex application's state effectively. By combining reducers, we can keep our code modular and easy to maintain. In the next steps, you can further enhance the board reducer by adding more actions to make it even more dynamic.