How can I dispatch an action from inside the merge method on a query?

[LoyalPotato]

Hello,

I'll use sliceFoo and sliceBar to distinguish between where I want to update.
I wanted to update a value from sliceFoo when a cache is updated on sliceBar's query is updated.

The action on sliceFoo also saves the value to local storage.

merge(currentCacheData, responseData) {
          if (isEqual(currentCacheData, responseData)) return currentCacheData;
           store.dispatch(setListItem({ item: responseData, list: "bananas" }));
          return responseData;
        },

But with this, I'm not having success. Is this possible through the merge method or another way or is it not possible at all?

Thanks

[EskiMojo14]

RTKQ is built on top of createAsyncThunk, and the lifecycle actions are dispatched as usual.

For convenience, matchers are attached to each endpoint.

As a result, you can respond to an endpoint fulfilling from another slice using extraReducers:

extraReducers: (builder) => {
  builder.addMatcher(
    api.endpoints.getFoo.matchFulfilled, 
    (state, action) => {
      const { payload } = action;
    }
  )
}

this seems a much cleaner solution than dispatching from merge.

[LoyalPotato]

So when the query finished on the other slice (the api) this will also get called/triggered?

Is there a way to call another reducer, on the same slice, from this or do I have to reuse the code (duplicate or refactor into a single function)?

[EskiMojo14]

yeah, exactly

your slice's case reducers are exposed as slice.caseReducers, so you could do

extraReducers: (builder) => {
  builder.addMatcher(
    api.endpoints.getFoo.matchFulfilled, 
    (state, action) => {
      const { payload } = action;
      // remember that the case reducer needs to be called with the right action
      return slice.caseReducers.setListItem(state, slice.actions.setListItem({ item: payload, list: "bananas" }))
    }
  )
}

[LoyalPotato]

Beautiful 👏 !!
Thank you so much. I much prefer it like this too 😄