How to handle multiple side effects with redux offline & redux toolkit?

Question

hope you good

I'm developing an offline first app with react-native, redux-toolkit & redux offline.

I got an issue with redux-offline/toolkit : I don't know how to handle cascade side effects in reducers

For exemple, in my app it's possible to create an item A and link it with multiple items B.

But It's offline first, and the item A key is API side generated, so I need to update all the items B when item A POST succeed and return generated key.

My code looks like this :

// A items's slice
reducers : {
 createA: {
  reducer: (state, { payload }) => {
    entityAdapter.setOne(state, payload)
  },
  prepare: (payload) => ({
    payload,
    meta: {
      offline: {
        effect: //axios or fetch call,
        commit: { type: 'A/createACommit' }
      }
    }
  })
},

// B items's slice
reducers: {
  updateManyB: {
    reducer: (state, { payload }) => {
      entityAdapter.upsertMany(state, payload)
    },
    prepare: (payload) => ({
      payload,
      meta: {
        offline: {
          effect: //axios or fetch call to update B items
        }
      }
    })
  }
},
extraReducers : {
 'A/createACommit': (state, action){
   //...manipulate data
   slice.caseReducers.updateManyB(state, data)
},

createA => api call succeed => A/createACommit => updateManyB => should api call but does not

I thought it would work, but it doesn't because calling slice.caseReducers.updateManyB doesn't trigger "prepare" statement, so it's not calling the update B items axios function

BTW slice.caseReducers is not very well documented, i've only read usage here : Redux Toolkit: Dispatch an action from an extraReducers listener?. I do not understand the difference with slice.actions

So if you have an immediate solution to my issue with the prepare statement, I'll take it.

But I feel like this approach isn't good, even if it was working, because redux says that "Reducers Must Not Have Side Effects". (but redux offline allows it with "effect/commit/rollback", isn't it ?).

Moreover there is a good chance that I encounter more complex situations/relations, with more side-effects

Do you think I should dive into redux-saga ? I never used it, and I don't know if it is usable with redux-toolkit & redux-offline

How to handle multiple side effects with redux offline & redux toolkit?

0 Answers0