dispatch in redux reducer (project created by tookit)

Question

I want to dispatch in changeCategory reducer. how should I do it?

I am using create-react-app tool Thanks

export const searchParamsSlice = createSlice({
  name: 'searchParams',
  initialState,
  
  reducers: {

    changeLocation: (state, action) => {
      state.location = action.payload;

    },

    changeCategory: (state, action) => {
      state.category = action.payload;

      const dispatch = useDispatch()

      dispatch(fetchResturantsAsync({ city: state.location, category: state.category, searchKey: state.seachText, page: 0, size: 10 }))
    },
}

Answer 1

You cannot dispatch in a reducer - it is one of the three Redux core principles that reducers have to be side-effect-free.

If you want to react to another action by dispatching a new one, you could always use the listenerMiddleware provided by RTK Query, or write a thunk action creator that dispatches both of those actions after each other.

Answer 2

Here is how you should do it

create this Middleware

export const asyncDispatchMiddleware = store => next => action => {
    let syncActivityFinished = false;
    let actionQueue = [];
  
    function flushQueue() {
      actionQueue.forEach(a => store.dispatch(a)); // flush queue
      actionQueue = [];
    }
  
    function asyncDispatch(asyncAction) {
      actionQueue = actionQueue.concat([asyncAction]);
  
      if (syncActivityFinished) {
        flushQueue();
      }
    }
  
    const actionWithAsyncDispatch =
      Object.assign({}, action, { asyncDispatch });
  
    const res = next(actionWithAsyncDispatch);
  
    syncActivityFinished = true;
    flushQueue();
  
    return res;
  };

Then add it to your store

export const store = configureStore({
  reducer: {
    counter: counterReducer,
   //....


  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(asyncDispatchMiddleware),
});

Then in your reducer do something like this

  changeWeekday: (state, action) => {
      state.weekName = action.payload;
      
      action.asyncDispatch(fetchSomethingAsync({
     
        weekName: state.weekName
      }))
    }

I had changeWeekday in my code, in your case it could be any reducer.