Несколько магазинов с использованием React-Redux

Question

Я пытаюсь подключить несколько магазинов на компоненте. Я попробовал пример на документах: https://react-redux.js.org/using-react-redux/accessing-store, но выдает ошибки при создании контекста: Ошибка Context<{ onSession: boolean; }>' is not assignable to type 'Context<ReactReduxContextValue<any, AnyAction>>'.

И если я использую только компоновку без контекста , не распознает компонент: Ошибка JSX element type 'Main' does not have any construct or call signatures.

Кто-нибудь знает, как подключить несколько магазинов?

Такова реализация собирается:

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);

Answer 1

Попробуйте

import rootReducer from './slices/rootReducer';

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

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

Answer 2

Итак, идея заключалась в том, чтобы сделать что-то вроде этого: demo

Session Store может поделиться с приложениями ниже, но способ, которым я решил это, использовал спа-архитектуру и библиотеку : https://single-spa.js.org/. Поэтому, как и каждое приложение, регистрируемое как независимое, я могу иметь несколько хранилищ, а для переменных сеансов я использовал sessionStorage.

Answer 3

Вы не можете прочитать несколько хранилищ в одном компоненте (за исключением крайне редких случаев), и вам не следует создавать несколько хранилищ для вашего приложения .

Если вы сможете добавить больше информации о том, какую именно проблему вы пытаетесь решить, я могу добавить дополнительную информацию, чтобы помочь. В противном случае, пожалуйста, не пытайтесь сделать это - это неправильный подход.