Redux Toolkit:从 extraReducers 侦听器分派动作? [英] Redux Toolkit: Dispatch an action from an extraReducers listener?

问题描述

我想知道从 extraReducer 调用 dispatch(someDumbAction()) 是否可能(或一个好的做法).

I want to know if it's possible (or a good practice) to call dispatch(someDumbAction()) from an extraReducer.

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

For example, I have a setData() action in reducers object from createSlice. I want to call setData() directly in my component. But I want to call it too in a extraReducer listener, in order to reuse the reducer logic, like below:

// 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([...]);

推荐答案

没有.Reducer 可以永远调度动作:

No. Reducers can never dispatch actions:

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

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

However, it looks like what you're really asking for here is the ability to run the same state update logic steps in multiple situations.

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

You could define the logic as a standalone reducer function, and reuse it in both cases:

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 处理程序中引用它:

You could also define the function as part of reducers, and then reference it inside of the extraReducers handler:

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);
    })
  },
})

这篇关于Redux Toolkit:从 extraReducers 侦听器分派动作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！