Redux 工具包：从 extraReducers 侦听器调度操作？

Question

我想知道是否可以（或一个好的做法）从 extraReducer 调用 dispatch(someDumbAction())。

例如，我在来自createSlice 的reducers 对象中有一个setData() 操作。 我想直接在我的组件中调用setData()。但我也想在 extraReducer 监听器中调用它，以便重用减速器逻辑，如下所示：

// Thunk Action
export const getData = createAsyncThunk('data/getData', async (params) => {
  return await api.get({ params })
})

// Slice creation
const slice = createSlice({
  name: 'data',
  initialState: [],
  reducers: {
    setData: (state, { payload }) => {
       state.push(payload);
    })
  },
  extraReducers: (builder: any) => {
    builder.addCase(getData.pending, (state) => {
      //...
    })
    builder.addCase(getData.rejected, (state) => {
      //...
    })
    builder.addCase(getData.fulfilled, (state, { payload }) => {
      // Here I want to dispatch `setData` action, in order to reuse that logic
      // dispatch(setData(payload));
      
    })
  },
})

// In any component: dispatch(setData([...]);

Answer 1

没有。 Reducer 可以永远调度操作：

https://redux.js.org/style-guide/style-guide#reducers-must-not-have-side-effects

但是，您在这里真正需要的是能够在多种情况下运行相同的状态更新逻辑步骤。

您可以将逻辑定义为独立的 reducer 函数，并在两种情况下重用它：

function addItem(state, action) {
  state.push(action.payload);
}

const slice = createSlice({
  name: 'data',
  initialState: [],
  reducers: {
    setData: addItem
  },
  extraReducers: (builder: any) => {
    builder.addCase(getData.pending, (state) => {
      //...
    })
    builder.addCase(getData.rejected, (state) => {
      //...
    })
    builder.addCase(getData.fulfilled, addItem)
  },
})

您还可以将函数定义为reducers 的一部分，然后在extraReducers 处理程序中引用它：

const slice = createSlice({
  name: 'data',
  initialState: [],
  reducers: {
    setData: (state, { payload }) => {
       state.push(payload);
    })
  },
  extraReducers: (builder: any) => {
    builder.addCase(getData.pending, (state) => {
      //...
    })
    builder.addCase(getData.rejected, (state) => {
      //...
    })
    builder.addCase(getData.fulfilled, (state, action) => {
      slice.caseReducers.setData(state, action);
    })
  },
})