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

admin

2024-01-21 04:37:50

0次

什么是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;