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

您不能读取一个组件中的多个存储（在极少数情况下除外）和you should not be creating multiple stores for your application。

如果您可以添加有关您要解决的实际问题的更多详细信息，我也许可以添加其他详细信息以提供帮助。否则，请不要尝试执行此操作-这是错误的方法。

Answer 2

尝试

import rootReducer from './slices/rootReducer';

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

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

Answer 3

因此，我们的想法是做这样的事情： demo

Session Store可以与下面的应用程序共享，但是我解决它的方法是使用spa体系结构和库：https://single-spa.js.org/。因此，就像每个独立的应用程序注册一样，我可以拥有多个存储，对于会话变量，我使用sessionStorage。

使用React-Redux的多个商店

3 个答案: