Alfa Brain
ВойтиЗарегистрироваться

Поддержка нескольких store в React-Redux приложении

Алексей ВечкановАлексей Вечканов•   

Использование нескольких redux хранилищ в React приложении быть довольно сложным.

В приложении с React-Redux рекомендуется иметь только одно хранилище (один store). Но если по какой-то странной/особой причине вам нужно иметь более одного  store, вы столкнетесь с проблемами.

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

1const Component1 = () => {
2  return (
3    <Provider store={store1}>
4      <Provider store={store2}>
5        <Component2 />
6      </Provider>
7    </Provider>
8  );
9};

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

Чтобы справиться с этой проблемой нам необходимо выполнить некоторые приготовления

Для этого нам понадобится react-redux 7 или выше. Поскольку версии ниже не используют Context API React. Мы будем использовать контексты для доступа к нескольким хранилищам без повторного использования провайдеров.

Создайте контекст для каждого store. Вы также можете импортировать ReactReduxContext из react-redux и использовать его для каждого из stor-ов, который вы хотите использовать в нужный момент.

1const store1Context = React.createContext();
2const store2Context = React.createContext();

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

1<Provider store={store1} context={store1Context}>
2  <Provider store={store2} context={store2Context}>
3    <App/>
4  </Provider>
5</Provider>

Нам также нужно создать пользовательские dispatch хуки и selector хуки. Если вы используете хуки по умолчанию (useSelector, useDispatch), он будет использовать хранилище с контекстом по умолчанию, если таковой имеется.

1import {
2    createDispatchHook,
3    createSelectorHook,
4} from 'react-redux';
5
6export const useStore1Dispatch = createDispatchHook(store1Context);
7export const useStore1Selector = createSelectorHook(store1Context);
8
9export const useStore2Dispatch = createDispatchHook(store2Context);
10export const useStore2Selector = createSelectorHook(store2Context);

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

Если вы предпочитаете подключать store компонентом высшего порядка (HOC), вы можете сделать:

1connect(mapStateToProps, mapDispatchtoProps,mergeProps, {context: store1Context})(Component)

Это все. Если у вас будут вопросы, пожалуйста пишите комментарии. Спасибо.

За основу данной статьи, использована статья Handling multiple stores in a React-Redux application от автора Vikas Kumar



Поделиться: