Make writing a habit together! This is the fourth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Antecedents to review

  • In the previous articles, we first looked at how to create a data warehouse store using Redux
  • How to use Redux in React and implement a demo
  • Finally, we implemented the createStore method in Redux
  • Next we will implement combineReducers to merge multiple reducer

The use of combineReducers

  • Why combineReducers?
  • Because our application may be complex, this means that a reducer function cannot implement all state change logic
  • It is easy to think of the solution that we should split the reducer function into multiple reducer, and then give combineReducers in Redux to help us merge multiple reducer
  • The following is the use of combineReducers
import {
  createStore,  
  combineReducers,
} from ".. /my-redux";

const countReducer = (state = 100, action) = > {
  const { type, payload = 1 } = action;

  switch (type) {
    case "ADD":
      return state + payload;
    default:
      returnstate; }};const countReducer2 = (state = { num: 1 }, action) = > {
  const { type, payload = 1 } = action;

  switch (type) {
    case "ADD2":
      return { ...state, num: state.num + payload };
    default:
      returnstate; }};export const store = createStore(
  // countReducer,

  Merge multiple reducers
   combineReducers({
     count: countReducer,
     count2: countReducer2,
   }),
);
Copy the code

Implement combineReducers

  • Without further ado, let’s look at the code
/** ** combineReducers Receives mapping from the reducer ** Returns the combined total reducer ** /
export const combineReducers = (reducerDict) = > {
  // Return the total reducer after the merge, so prevState and Action will also be received
  return (prevState = {}, action) = > {
    const nextState = {};

    let hasChanged = false;

    for (const key in reducerDict) {
      constreducer = reducerDict[key]; nextState[key] = reducer(prevState[key], action); hasChanged = hasChanged || nextState[key] ! == prevState[key]; } hasChanged = hasChanged ||Object.keys(nextState).length ! = =Object.keys(prevState).length;

    return hasChanged ? nextState : prevState;
  };
};
Copy the code
  • The implementation of combineReducers is also simple
  • It accepts all the mapping objects from the Reducer
  • Therefore, through the for in loop this mapping object, each reducer can be obtained
  • Then execute each reducer and save the new state generated by each reducer according to the previously accepted mapping object
  • Another more detailed point is that in the combineReducers method, hasChanged is used to indicate whether there is a state change
    • If yes, return to the new state
    • If not, return to the original state
    • This is to comply with the rules of immutable data. When data changes, a new state can be generated. It is also convenient for external use to determine whether data changes are generated

summary

  • This article introduces the implementation of the combineReducers method in Redux, and the next article will implement applyMiddleware

  • That’s all for today’s sharing, and you’re welcome to discuss it in the comments section 👏

  • If you feel that the article is written well, I hope you do not begrudge praise, everyone’s encouragement is the biggest power I share 🥰