Redux Toolkit

Redux Toolkit 是 Redux 官方推荐的开发工具包，用来减少模板代码，并内置更合理的默认配置。

pnpm add @reduxjs/toolkit

Chrome 插件支持

Redux Toolkit 创建的 store 默认支持 Redux DevTools，方便在浏览器中跟踪 action 和 state 变化。

configureStore

configureStore 是创建 store 的推荐方式。它默认集成 Redux DevTools，并包含常用中间件配置。

src/store/index.js

import { configureStore } from '@reduxjs/toolkit';

const initialState = {
  msg: '张三',
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_MSG':
      return { ...state, msg: action.payload };
    default:
      return state;
  }
}

const store = configureStore({
  reducer,
});

export default store;

createSlice

createSlice 会根据切片配置自动生成 action creator 和 reducer，是 Redux Toolkit 最常用的 API。

src/store/app-slice.js

import { createSlice } from '@reduxjs/toolkit';

const appSlice = createSlice({
  name: 'app',
  initialState: {
    msg: '张三',
  },
  reducers: {
    setMsg(state, action) {
      state.msg = action.payload;
    },
  },
});

export const { setMsg } = appSlice.actions;

export default appSlice.reducer;

再把 reducer 注册到 store。

src/store/index.js

import { configureStore } from '@reduxjs/toolkit';
import appReducer from './app-slice';

const store = configureStore({
  reducer: {
    app: appReducer,
  },
});

export default store;

为什么可以直接写修改

在 createSlice 的 reducer 中可以写 state.msg = action.payload，这是因为 Redux Toolkit 内部使用 Immer 帮你生成不可变更新，并不会真的直接修改原始 state。

setMsg(state, action) {
  state.msg = action.payload;
}

等价于：

return {
  ...state,
  msg: action.payload,
};

使用 Action

import store from './store';
import { setMsg } from './store/app-slice';

store.dispatch(setMsg('李四'));

Redux Toolkit 的重点是把重复的 action type、action creator 和 reducer 样板代码收敛到 createSlice 里，让业务代码更聚焦。

#Redux Toolkit

#Chrome 插件支持

#configureStore

#createSlice