Redux Toolkit

本文作者为 360 奇舞团前端开发工程师

阅读本文章前，需要先了解下 redux 的基本概念与用法，Redux Toolkit 是建立在 Redux 基础之上的工具包，因此需要对 Redux 的基本概念有一定的了解，包括 Action、Reducer、Store、Middleware 等。理解 Redux 的工作原理和数据流程有助于更好地理解和使用 Redux Toolkit。

简单复习下 redux 的相关内容，以便我们更容易的认识 Redux Toolkit 带来了哪些便捷~

Redux 是什么？

Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。可以更好的帮助开发者管理项目的数据与状态。

可以将 Redux 与 React 或其他视图库一起使用。它体小精悍（只有 2kB ，包括依赖），却有很强大的插件扩展生态。是 React 生态系统中非常重要的一部分。

Redux 基本原理

所有的状态都以对象树的方式 (state) 存放于单个 store 中。

唯一改变状态树 (state tree) 的方法是创建 action :一个描述发生了什么的对象，并将其 dispatch 派发给 store。 要指定状态树如何响应 action 来进行更新，你可以编写纯 reducer 函数，这些函数根据旧 state 和 action 来计算新 state。

新的 state 被创建后，对象会自动传递给所有注册了监听器的组件，从而触发组件的重新渲染，使得界面始终保持与当前的 state 对象一致。

图解 Redux

without redux 🆚 with redux

Redux 基本原理流程图

通过以上的回顾与学习，相信大家已经对 Redux 有了一些记忆，下面看下 Redux Toolkit --- 简化 Redux 开发流程的利器

Redux Toolkit 是什么？

官方给出的解释是：

Redux Toolkit is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state.

为了简化 Redux 的开发流程，Redux Toolkit 应运而生。Redux Toolkit 是一个官方推荐的工具包，旨在简化 Redux 开发流程，减少样板代码，提高开发效率。

Redux Tookit（也称为“RTK”） 是官方的推荐的编写 Redux 逻辑方法。

@reduxjs/toolkit 包封装了核心的 redux 包，包含我们认为构建 Redux 应用所必须的 API 方法和常用依赖。Redux Toolkit 集成了我们建议的最佳实践，简化了大部分 Redux 任务，阻止了常见错误，并让编写 Redux 应用程序变得更容易。

通过以上的介绍，虽然说使用 Redux Toolkit 有自己的使用方法，但是本质还是 Redux！如果今天你要写任何的 Redux 逻辑，你都应该使用 Redux Toolkit 来编写代码

Redux Toolkit 的核心功能

在了解 Redux Toolkit 之前，我们首先需要理解状态管理的概念。状态管理是指将应用的状态集中管理，使得状态的变化可以被跟踪和控制。

Redux Toolkit 提供了一些核心功能，其中包括：

• @reduxjs/toolkit 包： Redux Toolkit 提供了一个包来集成常用的 Redux 工具和中间件。

• createSlice： 通过 createSlice 函数，可以轻松地创建包含 reducer 和 action 的 “slice”。

• configureStore： 用于创建 Redux store 的函数，集成了常用的 middleware。

• createAsyncThunk： 简化异步操作的创建，使得处理异步逻辑更加方便。

• createSelector： 用于创建可记忆化的选择器，提高状态选择的性能。

Redux Toolkit 相比于传统的 Redux 开发方式的优点

• 简化开发流程： Redux Toolkit 提供了一系列工具函数和模块，可以大大简化 Redux 的开发流程，减少样板代码。

• 减少样板代码： 通过使用 createSlice 和 createAsyncThunk，相比于 redux 可以减少大量的重复代码，使得代码更加简洁清晰。

• 提高开发效率： Redux Toolkit 提供了一套标准化的工具和模式，使得开发者可以更加专注于业务逻辑的实现，提高开发效率,和使用redux相比，大大降低了书写状态管理时出现的失误。

• 与现有 Redux 生态的兼容性： Redux Toolkit 与传统的 Redux 应用和中间件兼容，可以无缝集成到现有项目中，同时也支持 Redux DevTools 调试工具的使用。

如何使用 Redux Toolkit？

1. 安装

安装和配置 Redux Toolkit 包 --- @reduxjs/toolkit

1. 创建store

export const store = configureStore({
 
  reducer: {
 
    counter: counterReducer
 
  }
 
});

1. 根据具体的业务情况选择

...

安装 Redux Toolkit (本质 安装@reduxjs/toolkit 包）

NPM
 
npm install @reduxjs/toolkit
 
Yarn
 
yarn add @reduxjs/toolkit

创建一个 React Redux 应用

以 redux + ts 为例

npx create-react-app my-app --template redux-typescript

创建后如下，我们只需关注这几个文件即可，把没用的我们进行一个简化（未整理版截图）

创建 store --- configureStore()

创建 slice 并导出

import { createSlice } from '@reduxjs/toolkit';
 
export interface CounterState {
 
  value: number;
 
  title: string
 
}
 
const initialState: CounterState = {
 
  value: 0,
 
  title: "this is redux toolkit"
 
};
 
// 创建一个 Slice
 
export const counterSlice = createSlice({
 
  name: 'counter',
 
  initialState,
 
  // 定义 reducers 并生成关联的操作
 
  reducers: {
 
    // 定义一个加的方法
 
    increment: (state) => {
 
      state.value += 1;
 
    },
 
    // 定义一个减的方法
 
    decrement: (state) => {
 
      state.value -= 1;
 
    },
 
  },
 
});
 
// 导出加减的方法
 
export const { increment, decrement } = counterSlice.actions;
 
// 默认导出
 
export default counterSlice.reducer;

挂载到 configureStore() 的 reducer 对象上

将创建的 store 在入口文件中加载到全局即可，这样一个简单的状态管理就完成了。通过 provide 的方式将 store 挂载到全局

import { createRoot } from 'react-dom/client';
 
import { Provider } from 'react-redux';
 
import { store } from './app/store';
 
const container = document.getElementById('root')!;
 
const root = createRoot(container);
 
root.render(
 
  
 
  
 
  
 
  
 
  
 
);

通过 useAppSelector hooks 查看 store的数据

import { useAppSelector } from '../../app/hooks';
 
import { selectCount } from './counterSlice';
 
export function Counter() {
 
  const count = useAppSelector(selectCount);
 
  return (
 
    
 {count} 
 
  );
 
}

通过 useAppDispatch hooks 改变 store的状态

import { useAppDispatch } from '../../app/hooks';
 
import {
 
decrement,
 
increment,
 
} from './counterSlice';
 
export function Counter() {
 
  const dispatch = useAppDispatch();
 
  return (
 
    
 
      
 
        
 
        className={styles.button}
 
        aria-label="Decrement value"
 
        onClick={() => dispatch(decrement())}
 
        >
 
          -（减少）
 
        
 
        {count}
 
        
 
        className={styles.button}
 
        aria-label="Increment value"
 
        onClick={() => dispatch(increment())}
 
        >
 
        +（增加）