Состояние Redux не определено в mapStateToProps с двумя хранилищами - программирование
Подтвердить что ты не робот

Состояние Redux не определено в mapStateToProps с двумя хранилищами

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

4b9b3361

Ответ 1

Подумайте о создании расширяемого хранилища, чтобы объединить общее хранилище с настраиваемым. Попробуйте реализовать функцию, которая принимает пользовательские редукторы в качестве параметров и объединяет их с общими. Я попробовал подобное решение, и оно легко работает, например, только один rect-redux Provider. Что-то вроде:

const createMyStore = (customReducers) => createStore(
  combineReducers({
    common: commonReducer,
    ...customReducers
  });
);

Скажите, подходит ли вам решение?