redux中间件的正确排列

mqkwyuun  于 2023-06-06  发布在  其他
关注(0)|答案(1)|浏览(157)

假设我有特征X和特征Y,它们代表我的react系统的两个不同方面。每个特性都有其自己的redux状态切片。在下面的示例中,如果X更改,Y应相应地调整其自身的状态。
项目结构如下:

src/features/feature-X/  {components/slice for featureX}
src/features/feature-Y/  {components/slice for featureY}
src/features/base/...etc.

我是否应该:

  • 使用形实转换程序调用X和Y上各自的归约器,使X和Y不耦合?(如果是这样,我会把这个thunk放在哪里?在X、Y或其他地方?)
  • 或者,我应该在X上添加一个createListenerMiddleware()(https://redux-toolkit.js.org/api/createListenerMiddleware)中间件来监听X的更改,然后调用Y的reducer吗
  • 或者,我应该在Y上添加一个createListenerMiddleware()中间件,它监听X的更改并相应地对自己的状态做出React。

如果是第一种情况,什么好处/场景需要createListenerMiddleware(),而简单的形实转换程序无法处理?

agyaoht7

agyaoht71#

您定义的每个状态片都可以声明可以响应 * 外部 * 操作的reducer函数。这些额外的reducer在切片的extraReducers属性上定义。
Redux的一个关键概念是每个切片缩减器“拥有”它的状态切片,并且许多切片缩减器可以独立地响应相同的动作类型。extraReducers允许createSlice响应除其生成的类型之外的其他操作类型。
示例:
切片X

import { createSlice } from '@reduxjs/toolkit';
import { actionY } from './sliceY';

const sliceX = createSlice({
  name: "X",
  initialState,
  reducers: {
    actionX: (state, action) => {
      // update X state
    },
  },
  extraReducers: builder => {
    builder
      .addCase(actionY, (state, action) => {
        // update X state based on action Y
      });
  },
});

export { actionX } = sliceX.actions;
export default sliceX;

切片Y

import { createSlice } from '@reduxjs/toolkit';
import { actionX } from './sliceX';

const sliceY = createSlice({
  name: "Y",
  initialState,
  reducers: {
    actionY: (state, action) => {
      // update Y state
    },
  },
  extraReducers: builder => {
    builder
      .addCase(actionX, (state, action) => {
        // update Y state based on action X
      });
  },
});

export { actionY } = sliceY.actions;
export default sliceY;

相关问题