How to use extraRducers pattern like redux tooltik?

[rwu823]

Slice patterns are helpful for maintaining large applications, and are similar to the redux toolkit's createSlice, but how to use patterns like extraReducers? A further way is to treat state of slice as a state machine.

for example on doc:

export const createFishSlice = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

export const createBearSlice = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})

But in the concepts of the state machine, the bear slice shouldn't care about how to mutate fishes

So it may become such:

export const createBearSlice = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatSomething: (type) => {
    // do something
  },
})

export const createFishSlice = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

// This is just an example of how to rely on other actions of specify slice
createFishSlice.extraActions((slice) => {
  slice.addCase(createBearSlice().eatSomething, (state, payload: { type }) => {
    if (type === 'fish') {
      return { fishes: state.fishes - 1 }
    }
  })
})

Another proposal is that we can create the same action name, which will be executed on both sides.
(Now it will be overridden to execute only the last action in create)

export const createBearSlice = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatSomething: (type) => {
    // do something
  },
})

export const createFishSlice = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
  eatSomething: (type) => set((state) => {
    if (type === 'fish) {
      return { fishes: state.fishes - 1 })
    }
  },
})

[dai-shi]

I don't think nobody created such middleware for your pattern. You would be the first to create one. 😄

If it's basically injecting an action dynamically, what you could do in bare zustand is something like this:

const useFooStore = ((set) => ({
  foo: 1,
  doSomething: () => { /* ... */ },
})
useFooStore.setState({ doSomething: () => { /* ... * } })

I don't think zustand slice pattern is same as RTK's. If you want namespacing, reach out some third-party libraries.

[oliwierptak]

I think the issue here is about inverting dependencies, and coming from RTK I'm not sure how to solve it.

// This is just an example of how to rely on other actions of specify slice
createFishSlice.extraActions((slice) => {
  slice.addCase(createBearSlice().eatSomething, (state, payload: { type }) => {
    if (type === 'fish') {
      return { fishes: state.fishes - 1 }
    }
  })
})

createFishSlice.extraActions((slice) => {
  slice.addCase(createBearSlice().eatSomething, (state, payload: { type }) => {
    if (type === 'apple') {
      return { apples: state.apples - 1 }
    }
  })
})

In the example above, it's the Fish and Apple slices that extend Bear slice functionality, while the Bear slice stays unmodified.
In practice, it means that the Bear slice is probably in another package and does not have to be re-released when Bear will one day decie to eat berries