Redux Toolkit:从一个extraReducers监听器发出一个动作

Question

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

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

// 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-不得有副作用

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

您可以将逻辑定义为一个独立的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);
})
},
})