How to have multiple instances of the same store in the same app?

[amrfarid140]

I am building a React Native application with a list/detail UX. Imagine a list of "Chats" then a user selects a chat and opens it. A single chat is complex enough that it warrants its own store.

The main reason for breaking down stores is app start time and store hydration. Chats only grow in size and hydrating a single store with multiple large chat will slow down the app because eventually any React Native storage solution relies on JSON.parse and JSON.stringify.

On the face of it, createStore is enough. But this fails when we need to update a specific chat store outside of the Provider scoped.

There's a background socket that listens for messages on all chats and inserts new messages into the store. This happens even when the chat is not on the screen. So we need access to the store from within the Provider tree to render the specific chat and also from non-React logic in the app to insert new messages when a chat and its provider are not mounted.

I've got something to compile and it seemed to work but actually the persisted state gets reset (or ignored?) each time createStore or create gets called.

To summarise my questions, How can I create and share parametrised instances of a store?

---

Approach example

interface BoardReadState {
  readonly id: string;
  readonly name: string;
  readonly messages: ChatMessage[];
}

interface BoardWriteActions {
  //Some Actions
}

type BoardState = BoardReadState & BoardWriteActions;

const storeConfig: (boardId: string) => StateCreator<BoardState> = (boardId: string) => (set) => ({
  //initial state setup. Removed to shorten sample
});

const persistConfig = (boardId: string) => ({
  name: `board-store-${boardId}`,
  storage: createJSONStorage(() => AsyncStorage),
});

export const getBoardStoreAsync = async (boardId: string) =>
  new Promise<UseBoundStore<StoreApi<BoardState>>>((resolve) => {
    const store = create(
      persist(storeConfig(boardId), {
        ...persistConfig(boardId),
        onRehydrateStorage: () => {
          resolve(store);
        },
      }),
    );
  });

export const useBoardStore = <U>(
  boardId: string,
  selector: (state: BoardState) => U,
): ReturnType<typeof useStore<StoreApi<BoardState>, U>> => {
   // Provider based approach, abbreviated for length.
  const store = useRef(createStore(persist(storeConfig(boardId), persistConfig(boardId))));

  return useStore(store.current, selector);
};

----
//In non-React code, I did

await getBoardStoreAsync().addMessage({});

//In React code
<Provider store={useBoardStore}>
<Chat />
</Provider>

As mentioned, this always results in constantly receiving the initial state for the single chat store.

[dbritto-dev]

The merge option should help you to merge the current state with persisted state

[amrfarid140]

Ok thanks!

I did set the version and the merge function which seemed to do the trick. Only after skipHydration though and managing when to trigger it manually.