Как настроить несколько провайдеров с разными магазинами?

Question

Я сейчас работаю над проектом и столкнулся с проблемой.Мне бы хотелось покончить с разными под-приложениями реакции с разными провайдерами и магазинами.

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

Глобальное хранилище прекрасно работает среди компонентов, но когда я пытаюсь разделить их, оно не работает должным образом.

Итак, этот работает хорошо.

const MainTemplateWithRouter = (
<div>
   <Router>
       <Provider store={createStore(reducers)}>
              <Switch>
                    <Route exact path="/" component={DashBoard} />
                    <Route path="/auth" component={Auth} />
                    <Route path="/admin-panel" component={AdminPanel} />
                    <Route path="/project-manager" component={ProjectManager} />
                    <Route path="/test" component={Test} />
                    <Route path="*"  component={NotFound} />
              </Switch>
       </Provider>
   </Router>
</div>
);

ReactDOM.render(MainTemplateWithRouter, document.querySelector('#root'));

Идеальным решением было бы что-то вроде этого с одним глобальным хранилищем (для хранения, например, выбранного в данный момент языка (многоязыковое приложение)) и одним хранилищем для каждой подпрограммы.приложение.Как уже упоминалось выше.Приложение будет огромным с большим количеством вспомогательных приложений, которые должны храниться в разных магазинах.

const MainTemplateWithRouter = (
<div>
   <Router>
           <h1>Header with Logo: XXXX</h1>
                <div>
                    <Link to="/">Home</Link>
                        <br/><br/>
                </div>

       <Provider store={createStore(reducers)}>
              <Switch>
                    <Route exact path="/" component={DashBoard} />
                    <Route path="/auth" component={Auth} />
                    <Provider store={createStore(adminPanelReducers)}>
                    <Route path="/admin-panel" component={AdminPanel} />
                    </Provider>
                    <Route path="/project-manager" component={ProjectManager} />
                    <Provider store={createStore(testReducer)}>
                    <Route path="/test" component={Test} />
                    </Provider>
                    <Route path="*"  component={NotFound} />
              </Switch>
       </Provider>
   </Router>
</div>
);

ReactDOM.render(MainTemplateWithRouter, document.querySelector('#root'));

Что я делаю не так?Можно ли достичь одного глобального магазина и отдельных магазинов для каждого подпапа?Если нет, могу ли я сохранить выбранный в настоящее время язык в глобальном контексте и создать хранилище для каждого вложенного приложения?

@ Edit

https://redux.js.org/recipes/isolating-redux-sub-apps - это то, что мне было нужно.

Разделение магазинов среди подпрограмм в соответствии с документами.Однако я не могу использовать глобальный магазин и местные магазины одновременно.

Answer 1

Этот раздел React Redux адресован только нескольким родственным хранилищам.

React Redux 6 был изменен для использования React context API вместо устаревшего Context.Redux Provider использует контекст React Provider для предоставления состояния подключенным компонентам.Для контекстного API Provider естественно переопределить значение, предоставленное родительским Provider, поэтому подключенный компонент будет учитывать только самый внутренний Provider.

Если имеется несколько вложенных хранилищ, они могут иметь свои собственные контексты , которые должны быть указаны как в Redux Provider, так и connect:

const GlobalContext = React.createContext();
const AdminContext = React.createContext();

...

   <Provider context={GlobalContext} store={globalStore}>
     ...
     <Provider context={AdminContext} store={adminStore}>
        <Route path="/admin-panel" component={AdminPanel} />
     </Provider>
      ...
   </Provider>

...

@connect(globalMapState, null, null, { context: GlobalContext })
@connect(adminMapState, null, null, { context: AdminContext })
class AdminPanel ...

Или брат или сестра могут использовать контекст Redux по умолчанию , чтобы избежать шаблоновкод:

const GlobalContext = React.createContext();

...

   <Provider context={GlobalContext} store={globalStore}>
     ...
     <Provider store={adminStore}>
        <Route path="/admin-panel" component={AdminPanel} />
     </Provider>
      ...
   </Provider>

...

@connect(globalMapState, null, null, { context: GlobalContext })
@connect(adminMapState)
class AdminPanel ...