Location>code7788 >text

redux vs redux-toolkit and source code implementation

Popularity：968 ℃/2025-03-04 10:22:48

we areKangaroo Cloud Stack UED Team, committed to creating excellent one-stop data middle platform products. We always maintain the craftsman spirit, explore the front-end path, and accumulate and spread experience value for the community.

Author of this article: Frost Xu

Preface

Why talk about this? I thought everyone would use redux-toolkit in the future. The asset made a redux-toolkit upgrade last week and learned about the relevant content, and produced this article.

In addition, let’s make up for the integrity of the knowledge section of React data flow.

  • Data flow management in React
  • Meet Mobx

In the previous week's sharing, the data flow in React, some implementations of react-redux, the implementation of middleware in redux, the use of Mobx and the implementation of beggar version have been shared.

For Redux itself, it has not been involved yet. Take advantage of the opportunity to use redux-toolkit to learn about the implementation of Redux.

Redux-Toolkit

Redux-Toolkit is a secondary package based on Redux, and is an out-of-the-box Redux tool, which is simpler and more convenient than Redux.

🚧 Why to use Redux-Toolkit?

  • "Configuring a Redux store is too complicated"
  • "I have to add a lot of packages to get Redux to do anything useful"
  • "Redux requires too much boilerplate code"

Toolkit

The concepts that Redux should have, Toolkit actually has, but they use them in different ways, such as reducer/actions, etc., which can be seen everywhere in Toolkit.

configureStore

Create store, or call Redux's createStore method inside the code

const store = configureStore({
    reducer: {
        counter: counterReducer,
        user: userReducer,
    },
});

createAction + createReducer

  • createAction
    Create action in Redux Create function
function createAction(type, prepareAction?)

Creation and use of action in redux

const updateName = (name: string) => ({ type: "user/UPDATE_NAME", name });
const updateAge = (age: number) => ({ type: "user/UPDATE_AGE", age });

Creation and use of action in Toolkit

// The first type
 const updateName = createAction<{ name: string }>("user/UPDATE_NAME");
 const updateAge = createAction<{ age: number }>("user/UPDATE_AGE");

 updateName(); // { type: 'user/UPDATE_NAME', payload: undefined }
 updateName({ name: "FBB" }); // { type: 'user/UPDATE_NAME', payload: { name: 'FBB' } }
 updateAge({ age: 18 });

 // The second type
 const updateName = createAction("user/UPDATE_NAME", (name: string) => ({
   payload: {
     name,
   },
 }));
 const updateAge = createAction("user/UPDATE_AGE", (age: number) => ({
   payload: {
     age,
   },
 }));

 updateName("FBB");
 updateAge(18);
  • createReducer
    Create a function for Redux reducer

:::info
💡 createReducer Use the Immer library to modify the state directly in the reducer without manually writing immutability logic
:::

Creation of reducer in Redux

export const userReducer = (
  state = initialUserState,
  action: { type: string; [propName: string]: any }
) => {
  switch () {
    case "user/UPDATE_NAME":
      return { ...state, name:  };
    case "user/UPDATE_AGE":
      return { ...state, age:  };
    default:
      return state;
  }
};

Creation of reducer in Toolkit

export const userReducer = createReducer(initialUserState, (builder) => {
  builder
    .addCase(updateAge, (state, action) => {
       = ;
    })
    .addCase(updateName, (state, action) => {
       = ;
    });
});

The createAction and createReducer provided by toolkit can help us simplify some template syntax in Redux, but the overall use is still the same. We still need action files and reducer files, which have been improved but not much.

redux demo   toolkit createReducer demo

createSlice

Functions that accept the initial state, reducer function object, and slice name, and automatically generate the action creator and action type corresponding to reducer and state

const userSlice = createSlice({
  name: "user",
  initialState: {
    age: 22,
    name: "shuangxu",
  },
  reducers: {
    updateName: (state, action: PayloadAction<string>) => {
       = ;
    },
    updateAge: (state, action: PayloadAction<number>) => {
       = ;
    },
  },
})

Use createSlice to create a shard, each shard represents the data state processing of a certain business. In it, the creation of action and reducer can be done.

export const userSliceName = ;
export const { updateAge, updateName } = ;
export const userReducer = ;

const store = configureStore({
  reducer: {
    [counterSliceName]: counterReducer,
    [userSliceName]: userReducer,
  },
});

toolkit slice demo

It is more convenient to use createSlice directly in Toolkit, which can directly export reducers and actions, and can directly obtain the corresponding content in one method, and do not require multiple definitions.

Redux source code implementation

Simple state management

The so-called state is actually data, such as name in the user

let state = {
   name: "shuangxu"
 }

 //User status
 ()

 // Change status
  = "FBB"

There is a problem in the above code. When we modify the state, we cannot notify the function using the state. We need to introduce a publish subscription mode to solve this problem.

const state = {
  name: "shuangxu",
};
const listeners = [];

const subscribe = (listener) => {
  (listener);
};

const changeName = (name) => {
   = name;
  ((listener) => {
    listener?.();
  });
};

subscribe(() => ());

changeName("FBB");
changeName("LuckyFBB");

In the above code, we have implemented that change the variable can notify the corresponding listening function. However, the above code is not universal and needs to be encapsulated.

const createStore = (initialState) => {
  let state = initialState;
  let listeners = [];

  const subscribe = (listener) => {
    (listener);
    return () => {
      listeners = ((fn) => fn !== listener);
    };
  };

  const changeState = (newState) => {
    state = { ...state, ...newState };
    ((listener) => {
      listener?.();
    });
  };

  const getState = () => state;

  return {
    subscribe,
    changeState,
    getState,
  };
};

// example
const { getState, changeState, subscribe } = createStore({
  name: "shuangxu",
  age: 19,
});

subscribe(() => (getState().name, getState().age));

changeState({ name: "FBB" });   // FBB 19
changeState({ age: 26 });       // FBB 26

changeState({ sex: "female" });

Constraint State Manager

The above implementations are able to change state and listen to state changes. However, the above method of changing state is too casual. We can modify the data in state at will.changeState({ sex: "female" }), even if sex does not exist in initialState, we need to constrain the name/age attribute to be only able to modify

Specify by a plan functionUPDATE_NAMEandUPDATE_AGEUpdate the corresponding attributes

const plan = (state, action) => {
  switch () {
    case "UPDATE_NAME":
      return {
        ...state,
        name: ,
      };
    case "UPDATE_AGE":
      return {
        ...state,
        age: ,
      };
    default:
      return state;
  }
};

Change the createStore function

const createStore = (plan, initialState) => {
  let state = initialState;
  let listeners = [];

  const subscribe = (listener) => {
    (listener);
    return () => {
      listeners = ((fn) => fn !== listener);
    };
  };

  const changeState = (action) => {
    state = plan(state, action);
    ((listener) => {
      listener?.();
    });
  };

  const getState = () => state;

  return {
    subscribe,
    changeState,
    getState,
  };
};

const { getState, changeState, subscribe } = createStore(plan, {
  name: "shuangxu",
  age: 19,
});

subscribe(() => (getState().name, getState().age));

changeState({ type: "UPDATE_NAME", name: "FBB" });
changeState({ type: "UPDATE_AGE", age: "28" });
changeState({ type: "UPDATE_SEX", sex: "female" });

The plan in the code is the reducer in redux, and changeState is dispatch.

Split reducer

What reducer does is simpler, receive oldState and update state through action.

However, there may be states with different modules in actual projects. If the execution plan of state is written in the same reducer, it is huge and complicated.

Therefore, in common projects, different reducers will be split by module, and finally, reducers will be merged in a function.

const initialState = {
   user: { name: "shuangxu", age: 19 },
   counter: { count: 1 },
 };

 // For the above state we split it into two reducers
 const userReducer = (state, action) => {
   switch () {
     case "UPDATE_NAME":
       return {
         ...state,
         name: ,
       };
     case "UPDATE_AGE":
       return {
         ...state,
         age: ,
       };
     default:
       return state;
   }
 };

 const counterReducer = (state, action) => {
   switch () {
     case "INCREMENT":
       return {
         count: + 1,
       };
     case "DECREMENT":
       return {
         ...state,
         count: - 1,
       };
     default:
       return state;
   }
 };

 // Integrate reducer
 const combineReducers = (reducers) => {
   // Return a new reducer function
   return (state = {}, action) => {
     const newState = {};
     for (const key in reducers) {
       const reducer = reducers[key];
       const preStateForKey = state[key];
       const nextStateForKey = reducer(preStateForKey, action);
       newState[key] = nextStateForKey;
     }
     return newState;
   };
 };

The code runs! !

const reducers = combineReducers({
  counter: counterReducer,
  user: userReducer,
});

const store = createStore(reducers, initialState);
(() => {
  const state = ();
  (, , );
});
({ type: "UPDATE_NAME", name: "FBB" });  // 1 FBB 19
({ type: "UPDATE_AGE", age: "28" });     // 1 FBB 28
({ type: "INCREMENT" });                 // 2 FBB 28
({ type: "DECREMENT" });                 // 1 FBB 28

Split state

In the code in the previous section, our state is still defined together, which will cause the state tree to be huge. When used in the project, we all define initialState in the reducer.

When using createStore, we can use it directly without passing in initialStatestore = createStore(reducers). Therefore, we need to deal with this situation.

Split state and reducer are written together.

const initialUserState = { name: "shuangxu", age: 19 };

const userReducer = (state = initialUserState, action) => {
  switch () {
    case "UPDATE_NAME":
      return {
        ...state,
        name: ,
      };
    case "UPDATE_AGE":
      return {
        ...state,
        age: ,
      };
    default:
      return state;
  }
};

const initialCounterState = { count: 1 };

const counterReducer = (state = initialCounterState, action) => {
  switch () {
    case "INCREMENT":
      return {
        count:  + 1,
      };
    case "DECREMENT":
      return {
        ...state,
        count:  - 1,
      };
    default:
      return state;
  }
};

Change the createStore function to automatically obtain the initialState of each reducer

const createStore = (reducer, initialState = {}) => {
   let state = initialState;
   let listeners = [];

   const subscribe = (listener) => {
     (listener);
     return () => {
       listeners = ((fn) => fn !== listener);
     };
   };

   const dispatch = (action) => {
     state = reducer(state, action);
     ((listener) => {
       listener?.();
     });
   };

   const getState = () => state;

   // Used only to get the initial value
   dispatch({ type: Symbol() });

   return {
     Subscribe,
     dispatch,
     getState,
   };
 };

dispatch({ type: Symbol() })The code can achieve the following effects:

  • When creatingStore, an action that does not match any type is triggeredstate = reducer(state, action)
  • Each reducer will enter the default item and return to initialState

Redux-Toolkit source code implementation

configureStore

Accept an object containing a reducer as a parameter, and internally call createStore of redux to create a store

import { combineReducers, createStore } from "redux";

export function configureStore({ reducer }: any) {
  const rootReducer = combineReducers(reducer);
  const store = createStore(rootReducer);
  return store;
}

createAction

const updateName = createAction<string>("user/UPDATE_NAME");
const updateName = createAction("user/UPDATE_NAME", (name: string) => ({
  payload: {
    name,
  },
}));

updateName("FBB");

Through the above example, it can be analyzed that createAction returns a function, accepts the first parameter type.{ type: 'user/UPDATE_NAME', payload: undefined };For the specific payload value, a second parameter needs to be passed to change

export const createAction = (type: string, preAction?: Function) => {
  function actionCreator(...args: any[]) {
    if (!preAction)
      return {
        type,
        payload: args[0],
      };
    const prepared = preAction(...args);
    if (!prepared) {
      throw new Error("prepareAction did not return an object");
    }
    return {
      type,
      payload: ,
    };
  }
   = type;
  return actionCreator;
};

createReducer

export const userReducer = createReducer(initialUserState, (builder) => {
  builder
    .addCase(updateAge, (state, action) => {
       = ;
    })
    .addCase(updateName, (state, action) => {
       = ;
    });
});

Each reducer is a function(state = initialState, action) => {}, so createReducer returns the value as a function

Through a createReducer function, you also need to know the corresponding operations of each action.

import { produce as createNextState } from "immer";

 export const createReducer = (
   initialState: any,
   builderCallback: (builder: any) => void
 ) => {
   const actionsMap = executeReducerBuilderCallback(builderCallback);
   return function reducer(state = initialState, action: any) {
     const caseReducer = actionsMap[];
     if (!caseReducer) return state;
     return createNextState(state, (draft: any) =>
       caseReducer(draft, action)
                           );
   };
 };

 // Use the second parameter of createReducer to construct the operation method corresponding to the action
 export const executeReducerBuilderCallback = (
   builderCallback: (builder: any) => void
 ) => {
   const actionsMap: any = {};
   const builder = {
     addCase(typeOrActionCreator: any, reducer: any) {
       const type =
         typeof typeOrActionCreator === "string"
         ? typeOrActionCreator
         : ;
       actionsMap[type] = reducer;
       return builder;
     },
   };
   builderCallback(builder);
   return actionsMap;
 };

createSlice

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 1,
  },
  reducers: {
    increment: (state: any) => {
       += 1;
    },
    decrement: (state: any) => {
       -= 1;
    },
  },
});

const counterSliceName = ;
const { increment, decrement } = ;
const counterReducer = ;

createSlice returns an object{ name, actions, reducer },accept{ name, initialState, reducers }Three parameters. The corresponding actions and reducers are obtained through the relevant parameters in reducers.

In createSlice, the createAction and createReducer methods are mainly used. By splicing each property of name and reducers into , call createReducer to traverse the property of reducers to add case

import { createAction } from "./createAction";
import { createReducer } from "./createReducer";

export default function createSlice({ name, initialState, reducers }: any) {
  const reducerNames = (reducers);

  const actionCreators: any = {};
  const sliceCaseReducersByType: any = {};

  ((reducerName) => {
    const type = `${name}/${reducerName}`;
    const reducerWithPrepare = reducers[reducerName];
    actionCreators[reducerName] = createAction(type);
    sliceCaseReducersByType[type] = reducerWithPrepare;
  });

  function buildReducer() {
    return createReducer(initialState, (builder) => {
      for (let key in sliceCaseReducersByType) {
        (key, sliceCaseReducersByType[key]);
      }
    });
  }

  return {
    name,
    actions: actionCreators,
    reducer: (state: any, action: any) => {
      const _reducer = buildReducer();
      return _reducer(state, action);
    },
  };
}

Summarize

This article explains the basic use of Redux-Toolkit. The source code of redux-toolkit is parsed from the source code of redux. It can also be seen from the source code that the implementation of toolkit is implemented based on redux, and the use is similar and has no destructive changes.

at last

Welcome to follow [Kangaroo Cloud Sender UED Team] ~
Kangaroo Cloud Data Stack UED team continues to share technical achievements for developers and has successively participated in open source welcome star

  • Big data distributed task scheduling system——Taier
  • Lightweight Web IDE UI framework—Molecule
  • SQL Parser project for the big data field—dt-sql-parser
  • Kangaroo Cloud Data Stack Front-end Team Code Review Engineering Practice Document-code-review-practices
  • A faster, more flexible configuration and simpler module packer - ko
  • Ant-design-testing library for component testing tools for antd
<Previous Next>