时间戳

首页 > 解决方案 > 在一个应用程序中拥有两个 redux 存储

javascript - 在一个应用程序中拥有两个 redux 存储

问题描述

我有一个 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>

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

标签： javascriptreactjsreact-nativereduxreact-redux

解决方案

分离 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;

推荐阅读