位置: IT常识 - 正文
Redux工具包(一) - Redux Toolkit的基本使用(redux-tookit)
编辑：rootadmin推荐整理分享Redux工具包(一) - Redux Toolkit的基本使用(redux-tookit)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:redux的使用流程,redux-tookit,redux/toolkit,redux-toolkit,redux tooltik,redux tool,redux-tookit,redux-toolkit,内容如对您有帮助，希望把文章链接给更多的朋友！
Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。
在前面我们学习Redux的时候应该已经发现，redux的编写逻辑过于的繁琐和麻烦。
并且代码通常分拆在多个文件中(虽然也可以放到一个文件管理，但是代码量过多，不利于管理);
Redux Toolkit包旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题;
在很多地方为了称呼方便，也将之称为“RTK”;
安装Redux Toolkit:npm install @reduxjs/toolkit react-redux
Redux Toolkit的核心API主要是如下几个:
configureStore: 包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer，添加你提供 的任何 Redux 中间件，redux-thunk默认包含，并启用 Redux DevTools Extension。
createSlice: 接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actions。
createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分 派动作类型的 thunk
Redux Toolkit基本使用
configureStore用于创建store对象，常见参数如下:
reducer: 将slice中的reducer可以组成一个对象传入此处;
middleware:可以使用参数，传入其他的中间件(自行了解);
devTools:是否配置devTools工具，默认为true;
import { configureStore } from "@reduxjs/toolkit"// 导入reducerimport counterReducer from "./features/counter"const store = configureStore({ reducer: { counter: counterReducer }, // 例如可以关闭redux-devtool devTools: false})export default storecreateSlice主要包含如下几个参数:
name:用户标记slice的名词
在之后的redux-devtool中会显示对应的名词;
initialState:初始化值
第一次初始化时的值;
reducers:相当于之前的reducer函数
对象类型，对象中可以添加很多的函数;
函数类似于redux原来reducer中的一个case语句;
函数的参数:
参数一: state, 当前的state状态参数二: 传递的actions参数, actions有两个属性, 一个是自动生成的type, 另一个是传递的参数放在payload中;createSlice返回值是一个对象，包含所有的actions;
import { createSlice } from "@reduxjs/toolkit"const counterSlice = createSlice({ name: "counter", initialState: { counter: 99 }, reducers: { // 直接对actions解构拿到payload changeNumber(state, { payload }) { state.counter = state.counter + payload } }})// reducers当中的方法会放在counterSlice的actions中, 用于派发actionexport const { changeNumber } = counterSlice.actions// 注意: 导出的是reducer, 用于在index.js中对reducer进行组合export default counterSlice.reducer接下来使用store中的counter数据和修改counter的操作和之前一样, 借助于react-redux库进行连接使用
import React, { PureComponent } from 'react'import { connect } from 'react-redux'import { changeNumber } from '../store/features/counter'export class Home extends PureComponent { changeNumber(num) { this.props.changeNumber(num) } render() { const { counter } = this.props return ( <div> <h2>Home</h2> <h2>当前计数: {counter}</h2> <button onClick={() => this.changeNumber(5)}>+5</button> <button onClick={() => this.changeNumber(10)}>+10</button> </div> ) }}// 映射要使用的store中的数据const mapStateToProps = (state) => ({ counter: state.counter.counter})// 映射要派发的方法const mapDispatchToProps = (dispatch) => ({ changeNumber(num) { dispatch(changeNumber(num)) }})export default connect(mapStateToProps, mapDispatchToProps)(Home)上一篇：torch.cuda常用指令(torch.cuda.is_available())
下一篇：vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错(vue 绑定子组件属性)
