在多个切片中触发相同的操作 Redux-Toolkit

Question

我好像漏掉了什么。我有以下设置：

projectSlice.js

import { createSlice } from '@reduxjs/toolkit'

const projectSlice = createSlice({
  name: 'projects',
  initialState: {
    list: {
      'project-1': {
        id,
        columnIds: [columnId1, columnId2, ...],
        ...
      }
    },
    order: [],
  },
  reducers: {
     ...
  },
  extraReducers: {
    'columns/createColumn': (state, action) => {
      // this never triggers
      const { payload: { projectId, column } = action
      state.list[projectId].columnIds.splice(0, 0, column.id)
    }
  }
})
export default projectSlice.reducer

columnSlice.js

import { createSlice } from '@reduxjs/toolkit'

const columnSlice = createSlice({
  name: 'columns',
  initialState: {},
  reducers: {
    createColumn(state, action) {
       ...
    }
  },
})
export const { createColumn } = columnSlice.actions
export default columnSlice.reducer

和store.js

import { configureStore } from '@reduxjs/toolkit'
import projectReducer from '../projectSlice'
import columnSlice from '../columnSlice'

const store = configureStore({
  reducer: {
    projects: projectReducer,
    columns: columnReducer,
  }
})

现在，根据我从文档中了解到的情况，extraReducer 应该能够侦听其他 redux 操作，并触发 extraReducer 操作。

我简化了这个例子，但基本上我有一个列切片和一个项目切片，每当创建一个列时，我都需要将它添加到项目切片中的列列表中。但是 extraReducer 永远不会触发。不太确定从这里去哪里。

编辑

之前忘了包括这个，调度是由反应组件触发的

Project.js

import { useDispatch } from 'react-redux'
import { createColumn } from '../../columnSlice'

export default function Project() {
  const dispatch = useDispatch()

  const handleClick = () => {
    dispatch(createColumn({...})
  }

  return (
    <button onClick={handleClick}>Click me</button>
  )
}

调度只触发 columnSlice，不触发 projectSlice

提供了一个例子in this sandbox来说明问题

Answer 1

您应该从 columnSlice.actions 导出 createColumn 动作创建器。然后你需要调度 createColumn 创建的动作。

例如

columnSlice.ts:

import { createSlice } from '@reduxjs/toolkit';

const columnSlice = createSlice({
  name: 'columns',
  initialState: {},
  reducers: {
    createColumn(state, action) {
      console.log('[columnSlice]: ', action);
    },
  },
});


export const { createColumn } = columnSlice.actions;

export default columnSlice.reducer;

projectSlice.ts:

import { createSlice } from '@reduxjs/toolkit';

const projectSlice = createSlice({
  name: 'projects',
  initialState: {
    list: {
      'project-1': {
        id: 1,
        columnIds: [1, 2],
      },
    },
    order: [],
  },
  reducers: {},
  extraReducers: {
    'columns/createColumn': (state: any, action) => {
      console.log('[projectSlice]:', action);
    },
  },
});
export default projectSlice.reducer;

store.ts:

import projectReducer from './projectSlice';
import columnReducer, { createColumn } from './columnSlice';
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    projects: projectReducer,
    columns: columnReducer,
  },
});

store.dispatch(createColumn({}));

控制台输出：

[projectSlice]: { type: 'columns/createColumn', payload: {} }
[columnSlice]:  { type: 'columns/createColumn', payload: {} }

如您所见，两个减速器都被触发了。

在多个切片中触发相同的操作 Redux-Toolkit

Same action triggering in multiple slices Redux-Toolkit

javascript

redux

redux-toolkit

编辑