如何在Redux Toolkit的多个state slice之间共享通用action

核心结论 #

你完全可以从外部文件导入通用action，且不需要创建无自有state的空slice，使用@reduxjs/toolkit提供的createAction即可实现独立action的定义，这是官方推荐的标准实现方式。

具体实现步骤 #

• 第一步：单独定义通用action
  创建独立的公共action文件（比如/src/store/commonActions.js），用createAction声明全局通用的updateField：

import { createAction } from '@reduxjs/toolkit';
// 第一个参数为action的type标识，可自定义
export const updateField = createAction('common/updateField');

• 第二步：各slice监听通用action
  在需要使用updateField的slice中，通过extraReducers配置监听该action，处理自身state的更新：

import { createSlice } from '@reduxjs/toolkit';
import { updateField } from './commonActions';

export const INITIAL_STATE = { title: { value: '' } }

const profileSlice = createSlice({
  name: 'profile',
  initialState: INITIAL_STATE,
  reducers: {
    // 放置当前slice独有的业务逻辑
  },
  extraReducers: (builder) => {
    builder.addCase(updateField, (state, { payload: { name, value } }) => {
      // RTK内置Immer，可直接修改state无需手动返回新对象
      state[name] = {
        ...state[name],
        value
      };
    })
  }
})

export default profileSlice.reducer;

可选优化：避免跨slice误触发 #

如果需要限制updateField只作用于指定slice，可在dispatch时传入slice标识做判断：

// 调用时传入slice参数
dispatch(updateField({
  slice: 'profile',
  name: 'title',
  value: '新标题'
}))

对应在slice的监听逻辑中增加校验：

builder.addCase(updateField, (state, { payload: { slice, name, value } }) => {
  // 非当前slice的操作直接跳过
  if (slice !== 'profile') return;
  state[name].value = value;
})

内容的提问来源于stack exchange，提问作者Tom