У меня есть два реагирующих приложения, каждое из которых имеет свое собственное хранилище редуксов (внутри ASP.Net Core, но я не думаю, что это актуально). Я обнаружил, что у меня было довольно много дублирующего кода между двумя приложениями, поэтому я создал проект Ui.Common для общего кода между двумя проектами. В этой области я представил commonStore который использует каждое из двух приложений, а также свой собственный магазин. Согласно документам, я инициализирую commonStore в своем собственном React-Context, и вызовы connect ссылаются на тот же контекст, когда требуется commonStore. Для инициализации магазинов я делаю:
const store = ReduxStore.configureStore(history);
const commonStore = CommonStore.configureStore();
ReactDOM.render(
<Provider store={store}>
<Provider store={commonStore} context={CommonContext}>
<ConnectedRouter history={history} children={routes} />
</Provider>
</Provider>,
document.getElementById('react-app')
);
Конфиг для CommonStore
public configureStore() {
const windowIfDefined = typeof window === 'undefined' ? null : window as any;
// If devTools is installed, connect to it
const devToolsExtension = windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__ as () => StoreEnhancer;
const createStoreWithMiddleware = compose(devToolsExtension ? devToolsExtension() : <S>(next: StoreEnhancerStoreCreator<S>) => next)(createStore);
const store = createStoreWithMiddleware(rootReducer()) as Store<CommonAppState>;
return store;
}
И это мои "вспомогательные" методы для взаимодействия с commonStore:
export function rootReducer(): Reducer<CommonAppState> {
return combineReducers<CommonAppState>({
app: appReducer,
userSettings: userSettingsReducer
});
}
export const CommonContext = React.createContext<ReactReduxContextValue>(undefined);
/** A connect wrapper to connect specifically to the common redux store. */
export function commonConnect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?: ConnectOptions) {
if (!options) {
options = {};
}
options.context = CommonContext;
return connect(mapStateToProps, mapDispatchToProps, mergeProps, options);
}
В одном из приложений (Ui.WebApp) это работает как положено, два магазина работают независимо, и все хорошо.
Во втором приложении (Ui.Management) commonConnect работает неправильно. В dev-tools, я вижу, что хранилище там, инициализируется и имеет начальное состояние по умолчанию. Кроме того, отправления (из mapDispatchToProps), которые я выполняю в магазине, находятся там и обновляют магазин соответствующим образом. Но в каждом mapStateToProps состояние всегда undefined.
Большинство компонентов, использующих commonStore фактически "живут" в Ui.Common и, поскольку они работают в Ui.WebApp но не в Ui.Management, проблема, скорее всего, не находится в проекте Ui.Common.
У двух частичных редукторов определенно есть свой набор по default, иначе он не будет работать ни в одном из двух приложений.