在一个应用程序中拥有两个 redux 存储答案

【问题标题】：Having two redux store in one application在一个应用程序中拥有两个 redux 存储
【发布时间】：2024-04-20 13:25:02
【问题描述】：

我有一个 react-native 应用程序，其中包含两个应用程序。这两个部分有自己的 UI 和状态。当用户打开想要注册的应用程序时，他们可以选择他们想如何使用这个应用程序。
我喜欢将这两个部分相互封装。
我的想法是有两个提供者并有条件地渲染它们，但不知道这是一个好的做法并且是否有任何边缘情况。

const rule = 'first' // or 'second'

rule === 'first' ?
<Provider store={firstStore}>
    // first app related screens
</Provider>
: 
<Provider store={secondStore}>
    // second app related screens
</Provider>

谁能完美地封装这两个部分的状态？

【问题讨论】：

同时显示两个提供者（其中一个是另一个的孩子）肯定会导致问题。拥有一个或另一个不会出错，但感觉不是一个伟大的设计。它使您的组件非常不可预测，因为它们不知道它们正在处理哪种存储结构/
@LindaPaiste 解决方案是什么？我可以有一个 Provider 有条件地通过 store 道具吗？

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

分离 UI 和数据是个好主意。但是，您不能有两个提供者，您需要将它们放入 2 个单独的减速器中。所以，你可以有这样的东西（代码只是一个截断的例子，你当然会用你自己的替换）。

import { combineReducers } from 'redux';

import carousels from './dataCarouselsReducer';
import filterIntents from './filterIntents';
import generatedImages from './generatedImages';
import indexing from './indexing';
import { nlpIntentsReducer } from './nlpIntents';
import nullSpaceData from './nullSpaceData';
import { searchReducer } from './search';
import similarityIntents from './similarityFilterIntents';
import uiCarouselsReducer from './uiCarouselsReducer';
import user from './user';
import workflows from './workflows';

const rootReducer = combineReducers({
  data: {
    user,
    search: searchReducer,
    nullSpaceData,
    similarityIntents,
    carousels,
    indexing,
    generatedImages,
    workflows,
  },
  ui: {
    filterIntents,
    nlpIntents: nlpIntentsReducer,
    uiCarouselsReducer,
  },
});

export default rootReducer;

【讨论】：