序言
在平时写业务代码的时候，使用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项目中投入使用，大家也可以在项目中尝试使用
网友评论