One action handled by two slices with redux-toolkit-wrapper

[jeremyhalin]

I am working on a mobile game. I want to dispatch an action that unlock something when the user "buys" it with virtual money.
To do that, I call my API to check if the user has enough virtual money, then return the new number of virtual money for the user and a success message. This action is in a specific slice, whereas the user's virtual money count is in user slice.

How could I listen for this action in my user slice? I looked at Redux documentation and the solution seems to be extraReducers. I've seen that your redux wrapper is already set with extraReducers only. I tried to get user slice's actions by doing something like userSlice.actions without success.

Should I rewrite my two slices with Redux toolkit without your wrapper?

[JeremyDolle]

I don't know if I understand well. But you can dispatch multiple actions in one. Like in Init module of the startup slice.

But yes you also can use redux-toolkit without the wrapper for specific things. The toolkit wrapper will be updated to cover this kind of issues

[jeremyhalin]

I understand that I can dispatch multiple actions in one, also I don't know if its good practice? But seems working perfectly and it is very convenient.

I've read that one action handled by multiple reducers is a good pattern. I don't think this currently possible with redux-toolkit-wrapper.

[JeremyDolle]

I think It's a good practice because you are strict with your redux and it will be easy to debug. If you debug with Flipper for exemple, you will see at a 't' moment each of your actions launched one by one, if you have a bug you will see it easily. I have maybe wrong but one action handled by multiple reducers can be difficult to maintain especially when the reducer is about another slice. It make more sense to have action and dedicated reducer because if not, you will create invisible link between slice.

That my point of view, BUT (because I probably don't understand all the context) maybe in your case it's better and make sense to handle it my multiple reducers and that probably not a bad choice.

[JeremyDolle]

Did you find your solution @jeremyhalin ? 😃

[jeremyhalin]

I tried to use Flipper, but it didn't work straight away, and I was lazy to make it work (I'm on Windows).
I understand your opinion and that's what I did in the end even if I read here that one action handled by multiple reducers is perfectly fine and Redux has been designed this way.

Furthermore, I couldn't make it happen with your wrapper, I think I tried by creating a slice with Redux toolkit directly, but it didn't work.
Since your solution was pretty simple and worked, I didn't push it further.

import api, { handleError } from '@/Services'
import UpdatePopcorns from '@/Store/User/UpdatePopcorns'

export default async (id, dispatch) => {
  if (!id) {
    return handleError({ message: 'Quote ID is required' })
  }
  const response = await api.post(`quotes/${id}/clues/unlock`)

  // dispatching another action here
  dispatch.dispatch(UpdatePopcorns.action({ popcorns: response.data.popcorns }))
  return {
    ...dispatch.getState().quote.item,
    progress: {
      ...dispatch.getState().quote.item.progress,
      clues_unlocked: response.data.clues_unlocked,
    },
  }
}

Is this ok?

[JeremyDolle]

I don't have all the context of your app so this is not easy but, why not ?