Question

Redux工具包文档提到在多个化简器中使用动作（或更确切地说是动作类型）

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

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

Answer 1

extraReducers的用途如下：

Redux的关键概念之一是每个切片缩减器“拥有”其状态切片，并且许多切片缩减器可以独立地响应相同的操作类型。 extraReducers允许createSlice响应其生成的类型以外的其他操作类型。

动作分配器应该知道该动作属于哪个减速器，这有点奇怪。我不确定使用<div v-html="html"></div> 和 reducers的动机，但是您可以使用extraReducers,允许多个切片响应相同的动作。

Answer 2

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

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

参考：

extraReducers：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进行相应的使用。

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

2 个答案: