typescript - Redux-tillstånd är odefinierat i mapStateToProps med två butiker

Jag har två React-appar som vardera har sin egen Redux-butik (inuti ASP.Net Core, men jag tror inte att det är relevant). Jag upptäckte att jag hade ganska mycket duplicerad kod mellan de två apparna, så jag skapade ett Ui.Common-projekt för den delade koden mellan de två projekten. Inom det projektet introducerade jag en commonStore som båda apparna använder samt sina egna butiker. Enligt dokumentationen initialiserar jag commonStore i sin egen React-Context och connect-anropen refererar till samma context när commonStore behövs. För initialiseringen av butikerna gör jag:

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')
);

Konfiguration för 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;
}

Och detta är mina "hjälp"-metoder för att interagera med 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);
}

I en av apparna (Ui.WebApp) fungerar detta som förväntat, de två butikerna fungerar oberoende och allt är trevligt.

I den andra appen (Ui.Management) verkar commonConnect inte fungera korrekt. I redux dev-tools kan jag se att store finns där, blir initialiserad och har ett standardinitialt tillstånd. Dessutom finns de dispatches (från mapDispatchToProps) som jag utför på store där och uppdaterar store enligt. Men i varje mapStateToProps är tillståndet alltid undefined.

De flesta av komponenterna som använder commonStore "lever" faktiskt i Ui.Common och eftersom de fungerar i Ui.WebApp men inte i Ui.Management, ligger problemet troligen inte i Ui.Common-projektet.

De två delvisa reducerarna har definitivt sitt default inställt, eftersom det annars inte skulle fungera i någon av de två apparna.

Svar #1

Tänk på att skapa en utbyggbar butik för att samla den gemensamma butiken med den anpassade. Försök implementera en funktion som tar anpassade reducers som parametrar och samlar dem med de gemensamma. Jag försökte en liknande lösning och det fungerade enkelt genom att instansiera endast en rect-redux Provider. Något som:

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

Berätta för mig om lösningen fungerar bra för dig.

Relaterade artiklar