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里面的type2、initialState：state的初始值3、reducer：定义方法，通过不同的方法来指定对state的不同操作方法有两个参数：1、state 这个state是一个代理对象，可以直接修改2、action 外面传递进来的参数 参数1；payload  外面传递的参数参数2：type  action自动生成的类型值  //'stu/setName' 切片会自动帮我们生成actionactions里面存储的是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

Redux Toolkit（RTK)相关推荐

使用 Redux Toolkit 和 RTK 查询创建 React 应用程序
您是否曾经想将 Redux 与 React Query 提供的功能一起使用?现在,您可以使用 Redux Toolkit 及其最新添加的功能:RTK Query. RTK Query 是一种高级数据获 ...
【视频】React redux toolkit创建状态切片
React redux toolkit创建状态切片
基于Open WebRTC Toolkit（OWT）的8K全景视频低延时直播系统
photo from Ready Player One 随着5G技术的发展,其高带宽.超低延时的特性为高分辨率全景视频的实现带来了更多的可能.本文来自Open WebRTC Toolkit (OWT) ...
Redux Toolkit 使用指南
以前我们使用 Redux,通常是指 Redux + React Redux 组合方案,但是现在有了更简化的方案:Redux Toolkit + React Redux,它帮助我们避免了 Redux 的 ...
Windows Performance Toolkit（WPT）入门
今天花点时间了解了一下WTP, 看到了一篇非常好的入门文章.看起来WTP对windows本身的性能状况分析很有用.目前还搞不懂如何将其应用在windows平台上的application. 先转下这篇入 ...
Redux原理（逐句解析）！！！
React reduc 是(React全家桶)的核心成员一.什么是Redux? 我们一直通过属性来进行组件中的数据传递,这种模式是非常脆弱的. 在日常的开发中经常会遇到非父子组件传递的场景.原来的方 ...
FoneDog iOS Toolkit（苹果数据恢复软件）官方正式版V2.1.62 | 苹果数据恢复大师下载 | 苹果数据恢复有免费的吗？
FoneDog iOS Toolkit 是专为苹果用户量身定做的一款集苹果数据恢复.苹果ios系统修复.iOS数据备份和还原.WhatsApp数据传输.数据迁移于一体的综合性苹果数据 ...
React - redux 使用（由浅入深）
React - redux 使用(由浅入深) 一. redux理解 1. redux 介绍 2. redux 使用情况 3. redux 工作流程 4. redux 三个核心概念 4.1 Action ...
知乎日报项目前端+后端-React18 + React-Router6 + React-redux + redux/toolkit
地址前端:https://github.com/superBiuBiuMan/-zhuhu_daily 后端:https://github.com/superBiuBiuMan/zhihu-dail ...

Redux Toolkit（RTK)

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

Redux Toolkit（RTK)相关推荐

最新文章

热门文章