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

Moment
1,705 阅读7分钟

什么是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
  1. 安装相关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文件

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

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

063efb619d5b5f2465c75a7f3bf871c.png

  • 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<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = 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
    // 在这里一般都是使用同步的reducer
    increment: (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组件

f788b66455760af99bc6bd8a78dbe3e.png

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

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

3af2a0ae5251ed133fcaec51c63372a.png

37d58f799305814d21e4e183f0894d0.png

  • 通过打印我们可以看出,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;
});
  1. 定义初始化数据
// 定义初始化数据
const initialState = {
  counter: 0 as number,
  // 这里懒得写类型了,都不难
  channels: [] as any,
};
  1. 接下来在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);
    });
  },

6d19b80550bd4b4dcaa991d812f7d3d.png

  • 这里运用官方的一些原话,翻译成人话就是
  • 利用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 <div></div>;
};

export default Issue;

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

6f94d3c2a18ca852fd5e2f98e7d350e.png

  • 对action使用对象结构
  • 然后使用将数据写入redux进行存储
 builder.addCase(channelsAction.fulfilled, (state, { payload }) => {
      // 请求成功咯,下班
      //   console.log(state);
      //   console.log(payload);
      state.channels = payload.channels;
    });
  • 此时,打开redux的浏览器插件,发现已经存储在了reudx上面了

0e3b4783fc93be03b204369d2549c40.png

怎么使用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 (
    <div>
      {/* 这里也懒得写ts类型了 */}
      {channels.map((item: any, index: number) => {
        return <div key={index}>{item.name}</div>;
      })}
    </div>
  );
};

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

345eaa6b7b56c14db6e3818ff12a993.png

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

鸡汤来咯

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

PS

  • 这篇文章仅仅讲解了ReduxToolkit的基本使用,更多详细的细节请移步 官方文档
  • 本人也是刚学没多久,如有错漏,烦请批评指出
  • 最近刷算法刷麻了,有没有也在刷算法的靓仔来交流一下

1435a7bede34d27ef3d489a3c633d7f.png

avatar
文章
阅读
粉丝