How to call other reducers in createSlice to change state?

Question

I use redux to createSlice, here is my createSlice looks like:

export default createSlice({
    name:'testSlice',
    initialState,
    reducers:{
        setRecords: setRecordsReducer,
        setObjects: setObjectsReducer,
        setBoth:....
    }
});

Here is setRecordsReducer and setObjectsReducer look like:

const setRecordsReducer = (state, {payload:{id,recordName}}) => {
    return {...state, items:{...state.items, records:{...state.items.records, [id]:{recordName}};
};

const setObjectsReducer = (state, {payload:{id,objectName}}) => {
    return {...state, objects:{...state.objects, records:{...state.objects.records, [id]:{objectName}};
};

The two reducer setRecordReducer and setObjectsReducer change different parts of the state (actually not change the state, but build new state based on it). setRecordReducer returns new state based on state.items.records; setObjectReducer returns new state based on state.objects.records.

I tried to create a new action setBoth, can I call both setRecordReducer and setObjectsReducer when action setBoth happens? So the two parts of the state can be changed and return me the new state?

Either either of the state updates dependent on the other update occurring first, or are these truly independent "chunks" of state? — Drew Reese, Nov 17 '21 at 08:39
They are truly independent chunks of state. No dependency. @DrewReese — spspli, Nov 17 '21 at 08:40

score 2 · Accepted Answer · answered Nov 17 '21 at 08:45

2

Since the state each is operating over then yes, I see no reason why you couldn't write a reducer function that called the others and passed the appropriate arguments. This new reducer function needs to also return the next computed state value, returned the combined updated state from each reducer function called.

const setBothReducer = (state, action) => {
  return {
    ...state,
    ...setRecordsReducer(state, action),
    ...setObjectsReducer(state, action),
  };
}

export default createSlice({
  name:'testSlice',
  initialState,
  reducers:{
    setRecords: setRecordsReducer,
    setObjects: setObjectsReducer,
    setBoth: setBothReducer,
  }
});

answered Nov 17 '21 at 08:45

Drew Reese

165,259
14
153
181

Thank you! If the two reducers on the same chunk const setRecordsReducer = (state, {payload:{id,recordName}}) => { return {...state, items:{...state.items, records:{...state.items.records, [id]:{recordName}}; }; const setObjectsReducer = (state, {payload:{id,objectName}}) => { return {...state, items:{...state.items, objects:{...state.items.objects, [id]:{objectName}}; }; If they both update the state.items, one is updating state.items.records, the other one is updating state.items.objects, then we cannot use above right? Seems the first reducer state change cannot be kept – spspli Nov 17 '21 at 09:40
@spspli Yes, I believe that is correct. If one reducer depended on the result of the other, then you would likely compute the next state from the first and pass that to the second instead of the unupdated state. – Drew Reese Nov 17 '21 at 09:53

How to call other reducers in createSlice to change state?

1 Answers1