使用@reduxjs/toolkit简化redux代码

序言

在平时写业务代码的时候，使用redux经常会遇到一些问题：

• 状态管理代码分散在action，constant，reducer三个文件中
• 定位问题路径较长，经常需要使用ctrl+f查找action->constant->reducer
• action和reducer中代码重复度较高，充斥了大量的样版代码
• 使用typescript时，需要自己定义大量类型

这个时候就会想，能不能对redux进行一定程度的封装，优化文件结构，来去掉这些样版代码，只保留核心的业务逻辑，这样在写代码和查找问题的时候代码都会清晰很多。偶然在网上看到了redux官方提供的Redux Toolkit，这个就是我想要的工具库。

概述

Redux Toolkit对redux的api进行了封装，提供了一种书写redux逻辑的标准，它是为了帮助解决有关Redux的三个常见问题而创建的：

• 配置redux store太麻烦
• 需要添加一系列redux全家桶才能实现业务
• redux需要大量样版代码

使用步骤

1. 安装

npm install @reduxjs/toolkit react-redux

2. 创建redux store

在根组件中，使用configureStore配置store，支持配置redux中间件，默认它会启用Redux DevTools Extension，和添加redux-thunk，检查状态改变，检查使用不可序列化值的中间件

// app.tsx
import { configureStore } from "@reduxjs/toolkit";
import reducer from "./slices";

const store = configureStore({
      reducer: reducer,
      devTools: __DEV__,
      middleware: getDefaultMiddleware => {
        return getDefaultMiddleware({
          // serializableCheck: false
        });
      }
    });

在这里配置，仅在开发模式下启用Redux DevTools Extension

3. 创建redux slice

slice是redux toolkit定义的一个概念，就是一系列相关数据的状态管理，包含action，state，reducer三个部分，在页面较简单时，可以认为每个页面的状态就是一个slice；在页面较复杂时，可以把一些相关状态放在一个slice中。

使用createSlice，可以基于reducer函数自动生成对应的action creator，例如这里用redux实现一个显示、隐藏对话框的功能:

import { createSlice } from "@reduxjs/toolkit"

const slice = createSlice({
  name: "home",
  initialState: {
    isShowModal: false
  },
  reducers: {
    showModal(state) {
      state.isShowModal = true;
    },
    hideModal(state) {
      state.isShowModal = false
    }
  }
});

export const { showModal, hideModal } = slice.actions;
export default slice.reducer;

其中，

• toolkit默认对reducer函数使用了immer，在reducer函数中我们可以直接修改state，immer会帮我们创建一个新的对象
• 根据我们写的showModal和hideModal两个reducer函数，createSlice生成了对应的action creator，他们会返回对应的action对象
• 从slice的reducer属性中，可以获取到完整的reducer函数，默认导出后可以用于创建store

4. 执行异步请求

使用createAsyncThunk可以执行异步请求，返回一个请求结果的Promise对象，最后在reducer中，对不同的请求结果做不同的处理，例如，请求一个活动接口：

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

export const getActivity = createAsyncThunk("home/getActivity", async (param, thunk) => {
  try {
    const res = await ajax({
      data: {
        uAnchorId: getAnchorId(),
        uActivityId: getActivityId()
      }
    });
    return res;
  } catch (error) {
    thunk.dispatch(
      Toast.showToast({
        text: "加载活动信息失败，请稍后重试"
      })
    );
    throw error;
  }
});

const homeSlice = createSlice({
  name: "home",
  initialState: {
    activity: null
  },
  reducers: {},
  extraReducers: builder => {
    builder.addCase(getActivity.fulfilled, (state, action) => {
      // success
      const data = action.payload;
      state.activity = data;
    });

    builder.addCase(getActivity.rejected, (state, action) => {
      // fail
    });
  }
});

其中，

• createAsyncThunk会提供一个thunk对象，可以使用它的dispatch方法将请求的结果转发给其他的reducer处理
• 在extraReducers中可以对请求结果的成功失败，做不同的处理

5. 其他

toolkit还提供了createReducer，createAction，createSelector等api，这里平时用得比较少，就不多做介绍了，这里只是抛砖引玉，感兴趣强烈建议去官网查看原文：https://redux-toolkit.js.org/

常见问题

• A non-serializable value was detected in an action, in the path: payload
  这个是因为immer只能处理可序列化的简单对象，不能处理类的实例，如果你的action.payload是一个类的实例，就会出现这个警告。这里就需要对action.payload进行浅拷贝将它转化为一个简单对象。我们业务中的action.payload实际情况比较复杂，所以先关掉了serializableCheck检查，后面再优化这里的逻辑

总结

使用toolkit可以大幅提高开发体验，和react hook以及typescript搭配起来使用更佳，官网的文档也写得相当详细，目前已经在k歌十几个大型hippy项目中投入使用，大家也可以在项目中尝试使用