Redux Toolkit（RTK)

文章参考：Redux Toolkit（RTK） – 李立超 | lilichao.com

RTK是什么

RTK是Redux工具包，简称RTK。RTK可以帮助我们处理使用Redux过程中的重复性工作，简化Redux中的各种操作

安装

npm

npm install react-redux @reduxjs/toolkit -S

yarn

yarn add react-redux @reduxjs/toolkit

使用见下方案例

• 文件结构

src-
  -- store
    -- index.js
    -- schoolSlice.js
    -- stuSlice.js
 -- App.jsx
 -- index.js

• index.js文件中引入

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";
​
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // 使用时，Provider把store注入到项目中，所有组件都可以使用store里面的数据了
  <Provider store={store}>
    <App />
  </Provider>
);

​

• store.index

// 使用RTK来构建store RTK--Redux Toolkit Redux工具包
import { configureStore, createSlice } from "@reduxjs/toolkit";
// 导入学生切片包
import { stuReducer } from "./stuSlice";
import { schoolReducer } from "./schoolSlice";
​
​
// 创建store，创建store对象，需要配置一个对象作为参数
// 传值：reducer（对象） 传指定需要用到的reducer
const store = configureStore({
  reducer: {
    student: stuReducer,
    school: schoolReducer
  },
});
​
export default store;

​

• 子文件student

import { createSlice } from "@reduxjs/toolkit";
/* 
  createSlice 创建reducer切片
  他需要一个配置对象作为参数，通过对象的不同属性来指定他的配置
  参数：一个对象，对象里面传3个值
    1、name:用来自动生成action里面的type
    2、initialState：state的初始值
    3、reducer：
      定义方法，通过不同的方法来指定对state的不同操作
      方法有两个参数：
        1、state 这个state是一个代理对象，可以直接修改
        2、action 外面传递进来的参数 
          参数1；payload  外面传递的参数
          参数2：type  action自动生成的类型值  //'stu/setName' 
    
    
     切片会自动帮我们生成action
     actions里面存储的是slice自动生成的action创建器（函数），调用后会 自动创建 action对象
     最后需暴露出去，调用时使用
​
*/
const stuSlice = createSlice({
  name: "stu",
  initialState: {
    name: "孙悟空",
    gender: "男",
    age: 18,
    address: "花果山",
  },
  reducers: {
    setName(state, action) {
      // console.log(action);
      // {type：name/函数名，payload：函数的参数}
      // action.payload 外面传的值
      state.name = action.payload;
    },
    setAge(state, action) {
      state.age = action.payload;
    },
  },
});
// stuSlice.actions 存放着切片中reducers里面定义的方法，暴露出去外面使用
export const { setAge, setName } = stuSlice.actions;
// 暴露reducer出去，在index文件中整理使用
export const { reducer: stuReducer } = stuSlice;
​

• 子文件school

import { createSlice } from "@reduxjs/toolkit";
const schoolSlice = createSlice({
  name: "school",
  initialState: {
    name: "花果山第一学校",
    address: "花果山水帘洞第二大道",
  },
  reducers: {
    setName(state, action) {
      state.name = action.payload;
    },
    setAddress(state, action) {
      state.address = action.payload;
    },
  },
});
​
export const { setName, setAddress } = schoolSlice.actions;
export const { reducer: schoolReducer } = schoolSlice;

​

• App文件内使用

目录

文章参考：Redux Toolkit（RTK） – 李立超 | lilichao.com

---

​