React项目的状态管理：Redux Toolkit

import { createSlice } from "@reduxjs/toolkit"

const useSlice = createSlice({
  name: "user",
  initialState: { // 初始状态
    name: "张三",
    age: 18,
  },
  reducers: { // 定义方法
    setName (state, action) {
      state.name = action.payload
    },
    setAge(state, action) {
      state.age = action.payload
    }
  }
})

export const { setName, setAge } = useSlice.actions // 导出方法
export default useSlice.reducer // 导出reducer

在react的状态当中，有一个规则是数据不可变，大白话讲就是这个state不应该直接修改，所以在代码中会直接生成一个新数据去覆盖它。遵循这个规则的话就是会写成setAge这个样子：

javascript 复制代码

import { createSlice } from "@reduxjs/toolkit"

const useSlice = createSlice({
  name: "user",
  initialState: { // 初始状态
    name: "张三",
    age: 18,
  },
  reducers: { // 定义方法
    setName (state, action) {
      state.name = action.payload
    },
    setAge(state, action) {
      return {
        ...state,
        age: action.payload
      }
    }
  }
})

export const { setName, setAge } = useSlice.actions // 导出方法
export default useSlice.reducer // 导出reducer

redux toolkit支持上面两种写法，所以写哪一种看个人爱好了

还可以继续写不同的文件在store里，对状态进行分类存放，对不同的分类都称为切片

在这里写一下，为什么在user.js要有以下两行代码：

复制代码

export const { setName, setAge } = useSlice.actions // 导出方法
export default useSlice.reducer // 导出reducer

直观感受就是很多余，为什么需要这样编写

export const { setName, setAge } = useSlice.actions

作用：导出该 slice 的 action creators（setName 和 setAge），供组件或其他地方调用。

为什么需要单独导出？

在组件中，你需要通过 dispatch(setName("Alice")) 这样的方式来触发状态更新。如果这里不导出这些 actions，外部代码就无法使用它们。

虽然可以直接通过 useSlice.actions.setName 访问，但直接解构并导出会更清晰，方便调用。

示例：

// 在其他组件中

import { setName } from './userSlice';

dispatch(setName("Bob")); // 直接使用导出的 action

export default useSlice.reducer
作用：导出 slice 的 reducer，供 Redux store 合并使用。
为什么需要默认导出？
Redux store 需要组合所有 slice 的 reducer（比如通过 combineReducers）。通常会在 store 的配置文件中导入各个 slice 的 reducer：
复制代码
// store.js
import userReducer from './userSlice'; // 这里导入的就是 useSlice.reducer
const rootReducer = combineReducers({
  user: userReducer,
  // 其他 reducer...
});
默认导出是为了简化导入语法（import userReducer from './user'），符合 Redux 的约定俗成

如果不这样写会怎样？

如果不导出 actions，外部代码需要直接访问 useSlice.actions.setName，这会增加耦合性（调用方需要知道 slice 的内部结构）。
如果不默认导出 reducer，store 配置时需要写更长的路径（比如 import { reducer as userReducer } from './user'），不够简洁

总结

这两行代码是 Redux Toolkit 的标准模式：

导出 actions：方便组件调用
导出 reducer：方便 store 组合

虽然看起来冗余，但这是为了职责分离和代码可维护性。如果项目中有多个 slice，这种模式能保持一致性，减少认知负担

（2）合并切片得到store

将前面写好的切片合并，一般是在store文件夹下新建一个index.js文件来合并切片，这里主要使用的是configureStore，代码如下：

复制代码

import { configureStore } from '@reduxjs/toolkit';
import User from './user';

export default configureStore({
  reducer: {
    user: User.reducer,
    // 有多少切片就一个个写进来即可
  }
})

（3）配置store和使用store

（1）配置

在index.jsx文件或者main.jsx文件进行配置

先添加以下代码，将上面的index.js文件导入进去：

复制代码

import store from './store';

然后用Provider组件包裹住<APP />，并且给属性绑定store，示例如下：

复制代码

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  // </React.StrictMode>
);

（2）使用

在需要使用状态的组件中进行编写代码，用到useSelector来拿数据，useDispatch来调用方法

复制代码

import React from "react";
import { useSelector, useDispatch } from "react-redux";

const PageOne = () => {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Page One</h1>
      <div>{user.age}</div>
      <button onClick={() => {
        dispatch({ type: "user/setAge" , payload: user.age + 1});
      }}>年龄+1</button>
    </div>
  )
}

export default PageOne;

但是这样的话这个 dispatch({ type: "user/setAge" , payload: user.age + 1})不够优雅，我们可以换一个优雅体面的方式

先将user引入组件中，这样就可以更方便的使用了，跟前面解释**export const { setName, setAge } = useSlice.actions**的写法的原因给callback了

复制代码

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import userSlice from "../../stores/user"; // 引入userSlice

const { setName, setAge } = userSlice.actions; // 解构出actions中的方法

const PageOne = () => {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Page One</h1>
      <div>{user.age}</div>
      <button onClick={() => {
        dispatch(setName("李四"));
        dispatch(setAge(user.age + 1));
      }}>年龄+1, 改名李四</button>
    </div>
  )
}

export default PageOne;

好了，toolkit的用法基本就是这样，学会了就可以在编程中一边练一边不断学习更高阶的用法了，冲冲冲