如何基于TS在React中使用Redux Toolkit

什么是Redux

• Redux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理.
• 可以帮助你开发出行为稳定可预测的、运行于不同的环境（客户端、服务器、原生应用）、易于测试的应用程序。不仅于此，它还提供超爽的开发体验，比如有一个与时间旅行调试器相结合的实时代码编辑.
• 可以将 Redux 与 React 或其他视图库一起使用。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态

Redux的三大原则

• 单一数据源
• State是制度的
• 使用纯函数来执行修改

Redux的不足

• Redux的初始化配置过于复杂
• 需要添加很多的包才能正常使用,例如 redux-immutable,redux-thunk,immutable.
• Redux需要太多的样板代码,例如臭名昭著的 Switch 语句

为什么是Redux Toolkit

• Redux Toolkit是Redux官方推荐的编写Redux逻辑的方法.
• 它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能.
• Redux Toolkit简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易.

从零开始搭建Redux

安装

1.创建React项目

npm create react-app my-redux-toolkit 

2.安装相关ReduxToolkit包

npm install @reduxjs/toolkit react-redux --save 

npm install redux-logger @types/redux-logger --D 

目录结构

1.在src目录上创建一个名为store的文件夹
2.在store文件夹下面创建一个文件名为index.ts作为主入口
3.在store文件夹下面创建一个名为modules的文件夹,用于存放所有的reducer文件

目录结构以及基本配置如下图所示:

注意:图中的配置将会在接下来的内中讲解.

• index.ts文件的配置

import { configureStore } from "@reduxjs/toolkit";

import logger from "redux-logger";

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";

// 引入每一个reducer
import count from "./modules/testSlice";

export const store = configureStore({reducer: {count},// 配置中间件// RTk已经默认使用了redux-thunk,这里不需要额外引入了// 如果需要一些自定义的中间件,可以通过调用getDefaultMiddleware// 并将结果包含在返回的中间件数组中// 案例中使用了日志的中间件,可以追踪到哪个页面在哪个时候使用了该reducer// 并且可以显示调用前的数据状态和调用后的数据状态middleware: (getDefaultMiddleware) => getDefaultMiddleware({}).concat(logger),
});

// 全局定义 dispatch和state的类型,并导出
// 后面使用过程中直接从该文件中引入,而不需要冲react-redux包中引入
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook = useSelector; 

• testSlice.ts文件的配置

import { createSlice } from "@reduxjs/toolkit";

// 定义初始化数据
const initialState = {counter: 0 as number,
};

// 定义一个切片
const counterSlice = createSlice({name: "count",initialState,reducers: {// 定义一个数字递增的actions action.type为 上面的定义的name/和该对象的方法名// 即action.type=count/increment// 在这里一般都是使用同步的reducerincrement: (state, action) => {console.log(state, "state");console.log(action, "action");},},
});

// 导出该action
export const { increment } = counterSlice.actions;

// 默认导出,到处的文件需要在store入口文件引入
export default counterSlice.reducer; 

如何在React中使用

• 打开项目根目录中的index.tsx文件
• 引入创建的store
• 从react-redux中引入 Provider .
• 用Provider以组件的形式包裹App组件

• 这个时候,我们的初始化配置已基本完成

在这里,我们在页面上使用该action,并引入count的state

• 通过打印我们可以看出,state是被proxy包裹了的,不能直接查看
• action则打印了两个元素,分别是payload和type
• payload则是在组件中传过来的参数,type则是action的类型,前面有讲到
• 通过payload传过来的参数进行操作,例如递增递减

increment: (state, action) => {console.log(state, "state");console.log(action, "action");state.counter += action.payload;}, 

• 看到这里可能有人已经产生疑问了,前面不是说过redux不是不能直接修改state吗,这里又怎么修改了.
• 其实这个疑惑是对的,因为ReduxToolkit内部使用的是 ‘immer’ 库,它允许在 reducers 中编写 “mutating” 逻辑,检测到“state”的发生变化并产生一个全新的,基于这些更改的不可变的 state. 这大大简化了redux的使用,并减少了因编写可变的逻辑引起的未知错误.

那么如何在ReduxToolkit中发送异步请求呢

• 首先我们借助一个库 axios

npm install axios --save 

• 在 @reduxjs/toolkit 引入 createAsyncThunk

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; 

• createAsyncThunk接收两个参数:

1.第一个为字符串,可作为action.type
2.第二个参数接收一个函数,在这里你可以编写一些异步函数,例如发送axios请求.该函数返回三个状态值,分别是pending, fulfilled, 和 rejected(哦豁,这不是Promise,没错,返回的状态值正是一个Promise风格的).
3.定义createAsyncThunk函数

export const channelsAction = createAsyncThunk("home/channels", async () => {
// getUserChannels函数是一个axios的请求
 const result = await getUserChannels();

 return result.data;
}); 

4.定义初始化数据

// 定义初始化数据
const initialState = {counter: 0 as number,// 这里懒得写类型了,都不难channels: [] as any,
}; 

5.接下来在createSlice里面新增一个extraReducers方法,接收一个参数builder,builed是一个对象,调用内部的方法addCase,该方法接收两个参数,第一个是createAsyncThunk的返回值的其中一个,第二个参数是一个函数,这里又接收两个参数

extraReducers: (builder) => {builder.addCase(channelsAction.pending, (state, action) => {// 在这里发送的异步请求还没有返回结果,这时候你还可以摸一下鱼// 例如上个厕所// 在这里也可以添加一些请求的动画// console.log(state);// console.log(action);});builder.addCase(channelsAction.rejected, (state, action) => {// 这里请求出错了,可能是你没洗手// 赶紧跑路吧console.log(state);console.log(action);});builder.addCase(channelsAction.fulfilled, (state, action) => {// 请求成功咯,下班console.log(state);console.log(action);});}, 

• 这里运用官方的一些原话,翻译成人话就是
• 利用dispatch调用action,状态处于pending
• 等待axios请求获取到最新结果,如果请求的结果成功,状态值改为fulfilled,则将axios的返回值作为dispatch操作的action.payload的值,如果请求失败,状态值改为rejected,返回的错误信息将作为action.payload的值.

在组件中使用

import React, { useEffect } from "react";

import { useAppDispatch } from "@/store";
import { channelsAction } from "@/store/modules/testSlice";

const Issue: React.FC = () => {const dispatch = useAppDispatch();useEffect(() => {dispatch(channelsAction());}, [dispatch]);return 
;
};

export default Issue; 

` 此时,我们已经能在控制台里看到请求到的数据了

• 对action使用对象结构
• 然后使用将数据写入redux进行存储

 builder.addCase(channelsAction.fulfilled, (state, { payload }) => {// 请求成功咯,下班// console.log(state);// console.log(payload);state.channels = payload.channels;}); 

• 此时,打开redux的浏览器插件,发现已经存储在了reudx上面了

怎么使用redux上的数据

• 在store文件下引入 useAppSelector

import {useAppSelector } from "@/store"; 

• 组件完整代码

import React, { useEffect } from "react";

import { useAppDispatch, useAppSelector } from "@/store";
import { channelsAction } from "@/store/modules/testSlice";

const Issue: React.FC = () => {const { channels } = useAppSelector((state) => state.count);const dispatch = useAppDispatch();useEffect(() => {dispatch(channelsAction());}, [dispatch]);return (
{/* 这里也懒得写ts类型了 */}{channels.map((item: any, index: number) => {return 
{item.name}
;})}
);
};

export default Issue; 

• 打开浏览器,你会发现数据已经完整的显示出来了

• 该教程到此结束了,如果想看完整的代码可以点击 点这里

鸡汤来咯

• 礁石之于大海,是激起美丽浪花的必要条件.患难之于人生,是一把打向胚料的锤,打掉的应是脆弱的铁屑,锻成的将是锋利的刀.在这个世界上有两种人,一种是一经打击就心灰意冷,从此便消沉下去的.另一种人在挫败之后他不会向命运低头,他总会找到一条更平坦更光明的路,使自己更加坚强,以胜利者的姿态再度站立起来.

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享