Multiple Stores using React-Redux

Question

I'm trying to connect multiple stores on a component. I tried the example on the docs: https://react-redux.js.org/using-react-redux/accessing-store, but throw errors when create Context: Error Context<{ onSession: boolean; }>' is not assignable to type 'Context<ReactReduxContextValue<any, AnyAction>>'.

And if I use only the compose without Context, does not recognize the component: Error JSX element type 'Main' does not have any construct or call signatures.

Has someone knows how to connect multiple stores?

This is how the implementation is going:

index.tsx

  const initialA = {
    onSession: false
  };

  const ContextA = React.createContext(initialA);
  const store = configureStoreSession();

  return (
    <div className="app">
      <div className="app-container">
        <Provider store={store} context={ContextA}>
          <Covenants />
        </Provider>
      </div>
    </div>
  );
}

main.tsx

type MainProps = {
  onSession: boolean;
};

function Main({ onSession }: MainProps) {
return (
    <div>Has session? {onSession}</div>
)
}

const mapStateA = (state: AppStateA) => {
  return {
    filters: state.stateA.filters
  };
};

const mapStateB = (state: AppStateB) => {
  return {
    onSession: state.stateB.onSession
  };
};

const mapDispatchA = {};
const mapDispatchB = {};

export default compose(
  connect(mapStateA, mapDispatchA),
  connect(mapStateB, mapDispatchB)
)(Main);

Not an exact solution but a similar issue is tackled here(in Svelte) -> stackoverflow.com/questions/72552107/… — SHARAD
– SHARAD, Commented Jun 8, 2022 at 21:00

Li Zheng · Accepted Answer · 2022-02-25 07:24:09Z

1

I guess the real requirement is render a react-native APP as a sub-app (library) in other APP, right? If so, you can see how I implement it in let other react-native APP can embed PixelShapeRN as sub-app, which ref to Isolating Redux Sub-Apps and Breaking out of Redux paradigm to isolate apps

answered Feb 25, 2022 at 7:24

Li Zheng

7511 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

markerikson · Accepted Answer · 2020-01-07 21:44:38Z

0

You cannot read multiple stores in one component (except in extremely rare edge cases), and you should not be creating multiple stores for your application.

If you can add more details on what actual problem you're trying to solve, I may be able to add additional detail to help. Otherwise, please don't try to do this - it's the wrong approach.

answered Jan 7, 2020 at 21:44

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

1 Comment

Brian Boyko Over a year ago

While it is NOT considered best practice to create multiple stores for your application, there are cases where that it is necessary. I'm working on a legacy project, where the Redux Store is a complete mess of spaghetti. Items that should be in local state are in the Store via reducers added at runtime, selectors are a nested mess, values are randomly Immutable or not... To pay down the technical debt, we're creating a new store using @reduxjs/toolkit and slowly migrating over. Until that's done, we need two stores.

Brian Boyko · Accepted Answer · 2020-03-09 13:43:59Z

0

Try

import rootReducer from './slices/rootReducer';

const store = configureStore({
  reducer: rootReducer,
  middleware: [...getDefaultMiddleware()]
});

const storeContext = createContext<ReactReduxContextValue>({store, storeState: rootReducer});

answered Mar 9, 2020 at 13:43

Brian Boyko

6377 silver badges17 bronze badges

Comments

anirom · Accepted Answer · 2020-04-23 19:30:24Z

0

So, the idea was to do something like this: demo

Session Store could share with the apps below, but the way that I solved it was using spa architecture and the library: https://single-spa.js.org/. So like every app register as independent I can have multiple stores, and for the sessions variables I used sessionStorage.

answered Apr 23, 2020 at 19:30

anirom

311 silver badge5 bronze badges

Comments

Vikas Kumar · Accepted Answer · 2021-10-12 16:31:50Z

It will be much easier by using hooks instead of using connect HOC.

As described here, you can create selector hooks and dispatch hooks for your stores and then use them in any component throughout the application.

export const useStore1Dispatch = createDispatchHook(store1Context);
export const useStore1Selector = createSelectorHook(store1Context);

export const useStore2Dispatch = createDispatchHook(store2Context);
export const useStore2Selector = createSelectorHook(store2Context);

If you still have to use connect, with compose. Then you should keep in mind that methods/values with similar names in another store will be overridden. In your codebase, I see that you haven't passed the context to connect call which is necessary for the store which is not using default react-redux context.

Collectives™ on Stack Overflow

Multiple Stores using React-Redux

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related