文章参考: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