Single dispatch for multiple stores with redux-middleware

I have an app that currently use a Flux architecture with a single dispatcher and multiple stores that reacts to an action. I want to rewrite it with zustand but I’m not sure how to re-create this pattern. So basically I want multiple stores with reducer that react to an action, and one action is dispatched to every reducer in stores.

I created a simple exemple of my attempt here

The main thing here is

const dispatch = (...args) => {
  apiA.dispatch(...args);
  apiB.dispatch(...args);
}

I have a single dispatch function that will dispatch to every stores. This works great but is there a better way to handle it with zustand ? Or is zustand not made for this kind of architecture ?

Maybe my answer is the combine function, but I’m not sure how to implement it.

[simon-milleto]

So, I found a way to achieve what I wanted, I’ve kept my reducer synchronous as described in the doc. And for the action where I need to run asynchronous, I do not use the returned value from reducer but I use the setState() function. I’m closing this issue, thanks for the help @dai-shi

[dai-shi]

So, it’s like locking store updates. A naive way would be like this?

const useStore = create((set, get) => ({
  promise: null,
  data: {},
  setData: async (data) => {
    await get().promise
    set({ data })
  }
}))

const updateState = (fn) => {
  useStore.setState({
    promise: new Promise((resolve) => {
      fn()
      useStore.setState({ promise: null })
      resolve()
    })
  })
}

Not very confident if this works without pitfalls, though, depending on usage.