Question

我有两个React应用程序，每个都有自己的Redux存储（在ASP.Net Core内部，但是我认为这无关紧要）。我发现两个应用程序之间有很多重复的代码，因此我为两个项目之间的共享代码创建了一个Ui.Common项目。在此范围内，我介绍了两个应用程序各自使用的commonStore以及它们自己的商店。根据文档，我在自己的React-Context上初始化commonStore，并且在需要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似乎无法正常工作。在redux dev-tools中，我可以看到商店在那里，被初始化并具有默认的初始状态。另外，我在商店上执行的调度（来自mapDispatchToProps）也在那里，并相应地更新了商店。但是在每个mapStateToProps中，状态始终为undefined。

大多数消耗commonStore的组件实际上在Ui.Common中处于“活动”状态，并且在Ui.WebApp中起作用但在Ui.Management中却没有，因此很可能没有找到问题所在在Ui.Common项目中。

两个部分减速器肯定设置为default，否则它将无法在两个应用程序中的任何一个中使用。

Answer 1

考虑创建可扩展存储以将公共存储与自定义存储聚合在一起。尝试实现一个将自定义化简器作为参数并将其与公用集合在一起的函数。我尝试了类似的解决方案，并且仅实例化一个rect-redux Provider即可轻松实现。像这样：

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

如果解决方案适合您，请告诉我。

在具有两个存储的mapStateToProps中未定义Redux状态

1 个答案: