React使用Redux Toolkit的方法示例
5人参与 • 2025-04-24 • Javascript
一、什么是redux toolkit
1、概念
redux toolkit是一个官方支持的、用于简化redux开发的工具集。它提供了一些简单易用的api和工具，可以帮助开发者更快速、更高效地编写redux应用。
2、主要功能
简化redux的配置
redux toolkit提供了一个createslice函数，可以用来快速创建redux的action和reducer，不需要手动编写大量的模板代码。
封装常用的redux函数
redux toolkit提供了一些封装过的redux函数，如createasyncthunk、createentityadapter等，这些函数可以帮助开发者更加容易地处理异步操作、管理实体数据等常见任务。
整合常用的中间件
redux toolkit默认集成了常用的中间件，如redux-thunk、redux-logger等，使得开发者可以更加便捷地使用这些中间件，而不需要手动配置。
提供默认的redux store配置
redux toolkit提供了一个configurestore函数，可以用来快速创建一个redux store，并且默认配置了许多常用的中间件和插件，减少了开发者的配置工作量。
总结
总的来说，redux toolkit可以帮助开发者更加高效地使用redux，减少了许多样板代码和配置工作，同时提供了一些常用的功能和工具，使得开发者可以更加专注于业务逻辑的实现
二、安装
// 如果你已经安装了redux 和 react-redux，则不需要重复安装 npm install @reduxjs/toolkit
三、简单例子
实现数值加、减的功能
1、创建store.js文件
import { configurestore, createslice } from '@reduxjs/toolkit';
const counterslice = createslice({
name: 'counter',
initialstate: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
},
});
const store = configurestore({
reducer: counterslice.reducer,
});
export default store;
export const { increment, decrement } = counterslice.actions;
2、页面中使用
import react from "react";
import { useselector, usedispatch } from "react-redux";
import { increment, decrement } from "./store";
function app() {
const count = useselector((state) => state.value);
const dispatch = usedispatch();
return (
<div>
<h1>count: {count}</h1>
<button onclick={() => dispatch(increment())}>+</button>
<button onclick={() => dispatch(decrement())}>-</button>
</div>
);
}
export default app;四、redux-toolkit 中的 configurestore
1、概念
configurestore是redux toolkit中的一个工厂函数，用于创建redux store。它的目的是简化redux store的设置，并提供许多默认设置和内置的中间件，使其更易于使用。
import { configurestore } from '@reduxjs/toolkit';
const store = configurestore({
// 一系列选项
});
2、选项详解
1、reducer
reducer是必选项，指定应用程序的根reducer函数。可以是一个单独的reducer函数，也可以是由多个reducer函数组成的对象。如果传递一个对象，则每个键将映射到应用程序状态中的相应属性。
2、preloadedstate
应用程序的初始状态。这可以是从服务器获取的数据或以其他方式获得的数据。简单理解为初始化的state
3、middleware
是一个数组，其中包含应用程序使用的所有中间件。默认情况下，configurestore将使用以下中间件
redux-thunk: 支持使用异步action创建函数
redux-immutable-state-invariant: 检查状态是否被修改
redux-logger: 记录redux操作日志
4、devtools
一个布尔值，用于启用或禁用redux devtools。如果值为true，则可以使用redux devtools来查看应用程序状态和操作日志。默认为true。
5、enhancers
它是一个数组，其中包含一组enhancer函数。enhancer是一种功能强大的redux工具，可以用于增强或修改redux store的行为。可用于添加redux中间件、增强redux devtools或使用其他工具。
6、replaythunk
它是一个布尔值，指示是否要重放thunk中的操作日志。如果设置为true，则redux store将回放thunk操作的历史记录，以便应用程序状态在重新加载时与之前一致。默认为false
7、serializablecheck
它一个布尔值，用于启用或禁用redux默认的序列化检查。序列化检查可确保redux store的状态可以被序列化为json字符串，并在重启应用程序时保持不变。默认为true。
8、serializablecheckoptions
一个对象，其中包含用于自定义序列化检查的选项。可用于更改序列化检查的错误消息或更改允许的数据类型。
3、总结
configurestore函数是一个创建redux store的快捷方式，为开发者提供了一些常用的设置和默认选项，从而加快了开发速度。在大多数情况下，使用默认设置就足够了，但如果需要自定义更多的选项，也可以通过传递一个选项对象来进行更改
五、edux-toolkit 中的 createreducer
1、概念
当我们使用 redux 开发应用程序时，一个非常重要的概念就是 reducer。一个 reducer 是一个纯函数，它接受先前的状态和一个动作，然后返回一个新状态。每个动作都会引起状态的变化，从而使应用程序状态管理更加清晰和可控。
在 redux toolkit 中，createreducer 方法是一个用于创建 reducer 的简单工具，它可以将多个 reducer 函数组合成一个 reducer 函数，并使用更简洁的语法定义 reducer 函数。使用 createreducer 可以大大简化编写 reducer 函数的过程。
2、基本语法
1、基本语法
import { createreducer } from '@reduxjs/toolkit';
/* 最新版rtk已弃用 */
const initialstate = { /* 初始状态 */ };
const myreducer = createreducer(initialstate, {
actioncreator1: (state, action) => { /* 处理 actioncreator1 */ },
actioncreator2: (state, action) => { /* 处理 actioncreator2 */ },
...
});2、使用一个带有多个 case 分支的 switch 语句来定义 reducer 函数
import { createreducer } from '@reduxjs/toolkit';
const initialstate = { /* 初始状态 */ };
const myreducer = createreducer(initialstate, (builder) => {
builder
.addcase(actioncreator1, (state, action) => { /* 处理 actioncreator1 */ })
.addcase(actioncreator2, (state, action) => { /* 处理 actioncreator2 */ })
...
});3、例子
1、创建counter-reducer.js文件
const initialstate = {
// 初始状态
count: 0
};
// 使用createreducer创建reducer函数
const counterreducer = createreducer(initialstate, {
// 处理increment action
increment: (state) => {
state.count += 1;
},
// 处理decrement action
decrement: (state) => {
state.count -= 1;
},
// 处理reset action
reset: (state) => {
state.count = 0;
}
});
2、在store文件引入
import { configurestore } from '@reduxjs/toolkit';
import counterreducer from './counterreducer';
const store = configurestore({
reducer: counterreducer
});3、页面中使用完成加、减、重置功能
import react from 'react';
import { usedispatch, useselector } from 'react-redux';
const counter = () => {
const count = useselector(state => state.count);
const dispatch = usedispatch();
return (
<div>
<h1>count: {count}</h1>
{/*
dispatch方法中直接
调用定义的reducer的方法
*/}
<button onclick={() => dispatch({type: 'increment'})}>increment</button>
<button onclick={() => dispatch({type: 'decrement'})}>decrement</button>
</div>
);
};
export default counter;
六、redux-toolkit 中的 createaction
1、概念
createaction 是一个用于创建 redux action creator 的函数，它可以让你更快地编写 redux 相关的代码，并且更加易于阅读和维护。
2、简单示例
使用 createaction，你只需要传入一个字符串类型的 action type，然后它会返回一个新的函数，这个函数就是 redux action creator。当你调用这个新的函数时，它会返回一个包含 type 属性的普通 javascript 对象，这个对象就是 redux 中的 action。
import { createaction } from '@reduxjs/toolkit'
const increment = createaction('counter/increment')
// 使用新的action creator
dispatch(increment()) // { type: 'counter/increment' }
3、使用createaction的好处
在实际使用中，createaction 的最大优点在于它可以自动创建 fsa（flux standard action）规范的 action，即一个带有 type、payload 和 error 属性的 action。这使得我们在编写 redux 相关的代码时，可以更加标准化和规范化，同时也能够更好地与其他库和工具集成。
import { createaction } from '@reduxjs/toolkit'
const addtodo = createaction('todos/add', (text) => ({
payload: { text }
}))
// 使用新的action creator
dispatch(addtodo('buy milk')) // { type: 'todos/add', payload: { text: 'buy milk' } }
4、实际例子
1、创建reducers目录并创建user.js文件
import { createreducer } from "@reduxjs/toolkit";
const userreducer = createreducer(
{
age: 1,
name: "张三",
},
(builder) => {
builder
.addcase("user/ageadd", (state, action) => {
state.age += 1;
})
.addcase("user/updatename", (state, action) => {
state.name = action.payload.name;
});
}
);
export default userreducer;
2、创建actions目录并创建user.js文件
import { createaction } from "@reduxjs/toolkit";
/**
* 接收两个参数
* 第一个参数 要调用reducer的名字
* 第二参数 是一个方法，接收调用时传过来的参数
* 返回一个payload的对象
*/
export const ageadd = createaction("user/ageadd", () => {
return {
payload: {},
};
});
export const updatename = createaction("user/updatename", (name) => {
return {
payload: {
name,
},
};
});
3、在configurestore中挂载
import { configurestore, createreducer } from "@reduxjs/toolkit";
import userreducer from "./reducers/user";
export const countreducer = createreducer(
{
num: 1,
},
{
/**
* 接收两个参数
* @param {} state 当前的状态
* @param {*} action 页面上传过来的状态
*/
add: (state, action) => {
// 在这里面可以直接修改state 不需要return
state.num += 1;
},
}
);
const store = configurestore({
// reducer: countreducer,
reducer: userreducer,
});
export default store;
4、页面中使用
import { useselector, usedispatch } from "react-redux";
import { ageadd, updatename } from "./store/actions/user";
export default function learnreduxtoolkit() {
const state = useselector((state) => state);
const dispatch = usedispatch();
return (
<div>
<div>
{state.name} - {state.age}
</div>
<button onclick={() => dispatch(ageadd())}>age + 1</button>
<input
type="text"
onchange={(event) => dispatch(updatename(event.target.value))}
/>
</div>
);
}七、切片
1、什么是切片
在 redux 中，一个 state tree 是由多个 reducer 组成的，每个 reducer 负责管理一个 state 的一部分，这个概念称为“切片”（slice）。
例如，一个电子商务应用程序可能有一个购物车的 state，一个用户信息的 state，以及一个商品列表的 state。每个 state 都可以由一个 reducer 管理，这些 reducer 可以通过 combinereducers 函数组合在一起，形成一个完整的 state tree。其中，每个 reducer 管理的部分 state 就是一个切片。
使用切片的好处在于，每个 reducer 只需要关心自己管理的部分 state，而不需要关心整个 state tree 的结构。这样可以使 reducer 的代码更加清晰和易于维护。此外，切片还可以让我们更加方便地组织 action creators 和 selectors，从而使代码结构更加清晰
2、什么是createslice
createslice是redux toolkit中提供的一个用于快速创建redux reducer的函数。它基于redux reducer的标准结构，使得创建和更新redux state更加方便、简洁。使用createslice函数创建的slice包含了一个redux reducer、一组action creators和对应的action types。
3、createslice解决了什么问题
createslice 解决了传统 redux 应用中需要手动编写 reducer 和 action creators 的问题，简化了 redux 应用程序的开发流程，提高了代码的可读性和可维护性。
在传统的 redux 应用程序中，我们需要手动编写 reducer 函数来处理每个 action type，然后将它们组合成一个大的 rootreducer 函数。这样的代码结构往往比较冗长和繁琐，同时也容易出错。而 createslice 的出现，让我们可以通过提供一个包含 reducer 和 action creators 的对象来自动生成相应的 reducer 函数和 action creators，从而避免了手动编写 reducer 的过程，使得开发者更加专注于业务逻辑的实现。
4、createslice的优点
1、约定优于配置
createslice 使用一些约定俗成的规则来生成 reducer 和 action creators，例如使用 immer 库来进行 immutable state 的更新，这样可以避免在编写 reducer 函数时出现一些常见的错误。
2、自动生成 action type
createslice 会自动根据 slice 的名称和 reducer 的名称生成相应的 action type，这样就避免了手动编写 action type 的过程，使得代码更加规范化和易于维护。
3、简化异步操
createslice 提供了一个 createasyncthunk 函数，用于简化异步操作的编写流程，让开发者更加专注于业务逻辑的实现
5、参数介绍
import { createslice } from '@reduxjs/toolkit'
/**
* createslice 返回当前切片模块
* 一个对象
*/
const useslice = createslice({
// 切片名
name: 'slicename',
// 初始状态
initialstate: {
},
/**
* reducer模块
* 这里并不能进行异步操作
*/
reducers: {
// 里面直接跟方法
reducername(state, action) {
// handle the action
return state
}
},
/**
* 用于处理其他的 action type。
* 这些 reducer 函数也接收一个名为 state 的参数和一个名为 action 的参数。
* 注意，这些 reducer 函数默认没有使用 immer 库进行 immutable state 的更新
*/
extrareducers: {
// handle extra reducers
}
})
// 导出相关的方法，页面可以直接调用
export const { reducername } = slicename.actions
// 当前的的状态
export default slicename.reducer
extrareducers
这里我们单独介绍一下extrareducers。当我们使用createslice创建redux的slice时，extrareducers可以用于添加额外的reducer。这些额外的reducer可以处理来自其他slice的action或其他非标准的action类型
1、在actions模块中定义一个action
export const updatename = (name) => {
return {
type: 'updatename',
name
}
}
2、在切片中引入
import { createslice } from "@reduxjs/toolkit";
/**
* createslice 返回当前切片模块
* 一个对象
*/
const userslice = createslice({
// 切片名
name: "user",
// 初始状态
initialstate: {
age: 1,
status: "",
name: '张三'
},
extrareducers: (builder) => {
builder
.addcase('updatename', (state, action) => {
console.log(state, action, '当前的动作')
state.name = '王五'
})
},
});
// 当前的的状态
export default userslice.reducer;
6、简单例子实现age++
1、创建user模块
import { createslice } from '@reduxjs/toolkit'
/**
* createslice 返回当前切片模块
* 一个对象
*/
const userslice = createslice({
// 切片名
name: 'user',
// 初始状态
initialstate: {
age: 1
},
/**
* reducer模块
* 这里并不能进行异步操作
*/
reducers: {
// 里面直接跟方法
addnum(state, action) {
return {...state, age: state.age + 1}
}
},
})
// 导出相关的方法，页面可以直接调用
export const { addnum } = userslice.actions
// 当前的的状态
export default userslice.reducer
2、页面中调用
import react from "react";
import { useselector, usedispatch } from "react-redux";
// import { increment, decrement } from "./store";
import { addnum } from "./slice/user";
function app() {
const user = useselector((state) => state.user);
const dispatch = usedispatch();
return (
<div>
{user.age}
<button onclick={() => dispatch(addnum())}>age + 1</button>
</div>
);
}
export default app;
八、redux-toolkit 中的 createasyncthunk
1、概念
createasyncthunk 是一个由 redux toolkit 提供的函数，用于创建处理异步操作的 thunk action creator。使用 createasyncthunk 可以简化 redux 中处理异步操作的流程，使代码更加清晰、简洁。
2、参数说明
import { createasyncthunk } from "@reduxjs/toolkit";
const myasyncthunk = createasyncthunk(
/**
* 一个字符串类型的 action 名称，用于在 redux 中识别该 action。
* 该名称通常包含操作名称和状态
* */
"myasyncoperationstatus",
/**
* 异步操作函数，该函数接收两个参数
* 第一个参数是 thunk 的 payload，也就是调用的时候传过来的
* 第二个参数是thunk对象
* dispatch
* 用于 dispatch 其他 action 的函数
* getstate
* 用于获取当前 redux store 中的 state 的函数
* extra
* 性是用于传递额外参数的对象
*
*/
async (arg, { dispatch, getstate, extra }) => {
// 异步操作函数，必须返回一个 promise
const response = await fetch("https://example.com/api/someendpoint");
return response.json();
},
{} // 可选的配置项
);
3、例子
点击按钮age延迟1秒后+1，在延迟的时候，显示loading。偶数的时候显示报错，并显示提示信息
1、在action目录的user.js文件添加一下代码
import { createaction, createasyncthunk } from "@reduxjs/toolkit";
const dely = () => {
return new promise((resolve, reject) => {
settimeout(() => {
resolve();
}, 1000);
});
};
export const ageaddasync = createasyncthunk(
"user/ageaddasync",
async (arg, { dispatch, getstate, extra }) => {
const { user } = getstate();
console.log(user.age);
await dely();
// 偶数的时候抛错
if (user.age % 2 === 0) {
throw new error("偶数的时候抛错")
}
}
);
2、修改slice目录里的user.js模块
import { createslice } from "@reduxjs/toolkit";
import { ageaddasync } from "./../actions/user";
const userslice = createslice({
// 切片名 必须全局唯一
name: "user",
// 初始化状态
initialstate: {
age: 1,
name: "李四",
status: "",
error: "",
},
reducers: {
/**
*
* @param {*} state 当前的state
* @param {*} action 穿过来的参数
*/
addage(state, action) {
return {
...state,
age: state.age + 1,
};
},
},
extrareducers: (builder) => {
builder
.addcase("user/updatename", (state, action) => {
state.name = action.payload.name;
})
// 异步方法的pedding状态
.addcase(ageaddasync.pending, (state) => {
state.status = "loading";
})
// 异步方法的成功的状态
.addcase(ageaddasync.fulfilled, (state, action) => {
state.age += 1;
state.status = "successed";
state.error = ''
})
/**
* state
* action 当前的错误信息
*/
.addcase(ageaddasync.rejected, (state, action) => {
console.log(action)
state.status = "error";
state.age += 1
state.error = action.error.message;
});
},
});
/**
* 导出slice模块的reducer
*/
export default userslice.reducer;
/**
* 直接导出actions模块
* 这个actions里面的方法和reducer里的方法名
* 一致，直接对象解构
*/
export const { addage } = userslice.actions;
3、挂载到configurestore
import { configurestore, createslice } from "@reduxjs/toolkit";
import user from './slice/user';
const store = configurestore({
reducer: {
user
},
});
export default store;
4、页面中使用
import { useselector, usedispatch } from "react-redux";
import { ageaddasync } from "./store/actions/user";
export default function learnreduxtoolkit4() {
const user = useselector((state) => state.user);
const dispatch = usedispatch();
return (
<div>
<div>
{user.name}--{user.age}
</div>
<div>{user.status}</div>
<div>{user.error}</div>
{/* <div>偶数抛出错误</div> */}
<button onclick={() => dispatch(ageaddasync())}>延迟一秒+1</button>
</div>
);
}
九、redux-toolkit 中的 createselector
1、概念
在 redux toolkit 中，createselector 是一个函数，它允许我们从 redux store 中选择部分状态数据，并将其作为参数传递给一个 memoized 函数，以避免在相同的输入下重复计算。此外，redux toolkit 中的 createselector 还支持嵌套选择器和参数选择器，使得选择和组合 redux store 中的状态更加灵活
2、参数说明
import { createselector } from '@reduxjs/toolkit'
export const nameandage = createselector(
/**
* 第一部分参数是一个或者多个输入选择器函数
* 用户选择redux store中的一部分状态，并将其
* 作为计算函数的参数
* 这些输入选择器函数可以是任何具有选择状态的功能
*/
// 所有的state,导出user模块给以下一位选手
(state) => state.user,
(user) => {
/**
* 只有当前模块的数据
* 发生改变的时候
* 才会触发这一系列的方法
*/
console.log("触发了吗")
return {
name: user.name,
age: user.age
}
}
)3、简单例子
1、在slice目录下创建student
import { createslice } from '@reduxjs/toolkit'
const studentslice = createslice({
name: "student",
initialstate: {
num: 1
},
reducers: {
numadd (state) {
state.num += 1
}
}
})
export default studentslice.reducer
export const { numadd } = studentslice.actions2、创建selectors目录，在里面添加user.js文件
import { createselector } from '@reduxjs/toolkit'
export const nameandage = createselector(
/**
* 第一部分参数是一个或者多个输入选择器函数
* 用户选择redux store中的一部分状态，并将其
* 作为计算函数的参数
* 这些输入选择器函数可以是任何具有选择状态的功能
*/
// 所有的state,导出user模块给以下一位选手
(state) => state.user,
(user) => {
/**
* 只有当前模块的数据
* 发生改变的时候
* 才会触发这一系列的方法
*/
console.log("触发了吗")
return {
name: user.name,
age: user.age
}
}
)3、页面中使用
import { nameandage } from "./store/selectors/user";
import { numadd } from "./store/slices/student";
import { useselector, usedispatch } from "react-redux";
import { useeffect } from "react";
export default function learnreduxtoolkit5() {
/**
* 如果要使用selector里面的数据
* 那么必须要通过useselector
* 然后把对应的方法传入就可以拿到
* 返回值
*/
const user = useselector(nameandage);
const dispatch = usedispatch();
useeffect(() => {
console.log("触发了吗")
}, [user])
const student = useselector((state) => state.student);
console.log(student);
return (
<div>
<div>{student.num}</div>
<button onclick={() => dispatch(numadd())}>+1</button>
</div>
);
}
4、使用场景
createselector函数主要用于优化react应用程序中的性能，特别是在具有大量数据的情况下。它的主要用途是创建输出选择器函数，该函数将redux store中的多个状态组合并到单个值中，并将该值缓存以提高性能
1、过滤和排序数据
通过createselector函数，可以根据多个条件从redux store中选择数据，并使用javascript函数对其进行过滤、排序等处理。
2、转换数据格式
通过createselector函数，可以将redux store中的原始数据转换为更易于处理的格式，如图表数据，饼状图数据等。
3、避免不必要的渲染
使用createselector函数可以避免不必要的渲染。当createselector函数的输入参数未更改时，将从缓存中返回结果。只有当输入参数更改时，createselector函数才会重新计算其输出，并在react组件中触发渲染。
4、避免重复计算
在redux store中包含大量数据时，使用createselector函数可以避免不必要的计算。例如，可以通过创建一个选择器函数，该函数选择一个对象数组并返回其长度来避免在每次计算数组长度时进行重复的大量计算
到此这篇关于react使用redux toolkit的方法示例的文章就介绍到这了,更多相关redux toolkit使用内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
赞 (0)
打赏
微信扫一扫
微信扫一扫
您想发表意见！！点此发布评论
发表评论