Redux 工具包中多个切片中的操作

Question

Redux 工具包文档提到在多个 reducer 中使用操作（或者更确切地说是操作类型）

首先，Redux 操作类型并不意味着对单个切片是专有的。从概念上讲，每个 slice reducer “拥有”它自己的 Redux 状态，但它应该能够监听任何动作类型并适当地更新其状态。例如，许多不同的切片可能希望通过清除数据或重置回初始状态值来响应“用户注销”操作。 在设计状态形状和创建切片时请记住这一点。

但是，“记住这一点”，考虑到工具包将切片名称放在每个动作类型的开头，实现这一点的最佳方法是什么？并且您从该切片中导出一个函数并调用该单个函数来调度操作？我错过了什么？这是否必须以某种不使用createSlice 的方式完成？

Answer 1

看起来这就是extraReducers 的用途：

Redux 的一个关键概念是每个 slice reducer “拥有”它的 state slice，并且许多 slice reducer 可以独立地响应相同的 action 类型。 extraReducers 允许 createSlice 响应除了它生成的类型之外的其他动作类型。

action dispatcher 应该知道 action 属于哪个 reducer，这有点奇怪。我不确定拥有reducers 和 extraReducers, 的动机，但您可以使用extraReducers 允许多个切片响应相同的操作。

Answer 2

我发现在使用createSlice 创建切片时使用extraReducers 功能是最好的方法。

在我的例子中，我通过为每个相关功能创建一个“SliceFactory”类来实现这一点。我已经使用它来完成示例中的操作，并通过侦听 LOGOUT_USER 操作来重置用户注销时的相关切片。

参考：

额外的减速器：https://redux-toolkit.js.org/api/createSlice#extrareducer

我用于工厂的原创文章：https://robkendal.co.uk/blog/2020-01-27-react-redux-components-apis-and-handler-utilities-part-two

import { createSlice } from '@reduxjs/toolkit';
import { LOGOUT_USER } from '../redux/actions';

class CrudReducerFactory {
  constructor(slice, state = null, initialState = {}) {
    state = state || slice;

    this.initialState = initialState;

    const reducerResult = createSlice({
      name: slice,
      initialState: initialState[state],
      reducers: this._generateReducers(),

      extraReducers: (builder) => {
        builder.addCase(LOGOUT_USER, (state, action) => {
          return { ...this.initialState };
        });
      },
    });

    this.reducer = reducerResult.reducer;
    this.actions = reducerResult.actions;
  }

  _generateReducers = () => {
    return {
      // Create One
      requestCreateOne: (state, action) => {
        state.isLoading = true;
      },
      requestCreateOneSuccess: (state, action) => {
        state.isLoading = false;
        state.one = action.payload;
      },
      requestCreateOneError: (state, action) => {
        state.isLoading = false;
      },
      
      // ...snip...
    };
  };
}

export default CrudReducerFactory;

这是这样实例化的：

const factory = new CrudReducerFactory('users', 'users', { foo: 'bah', one: null, isLoading: false } );

第一个参数是切片的名称，第二个是状态切片，第三个是初始状态。

然后您可以使用factory.reducer 和factory.actions 进行相应的使用。