У меня есть два реагирующих приложения, каждое из которых имеет свое собственное хранилище редуксов (внутри 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
, иначе он не будет работать ни в одном из двух приложений.