Can I merge a store from a node module using Redux in a React app?

Viewed 14

I've created a node module which is a feature for a React-Native app

This module includes its own redux store.

I have a host app that has its own redux store and the two stores are merged using combineReducers like so :

 const rootReducer = combineReducers({
    rootSlice,
    modulesReducer
}
);

export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: false,
        })
});

And I'm able to log the merged stores everything seems great so far.

However when I trigger an actions that should update the module's store, it's not updating in the host app's store.

Here's my slice within the module :

const authenticationInitialState: any = {
  token: null,
  userId: null,
};

const authenticationSlice = createSlice({
  name: 'authentication',
  initialState: authenticationInitialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      authenticationApi.endpoints.signin.matchFulfilled,
      (state, { payload }) => {
        state.token = payload.token;
        state.userId = payload.userId;
      }
    );
  },
});

const { actions, reducer } = authenticationSlice;
export const {} = actions;
export default reducer;

Here's the store within the module:

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { authenticationSlice } from '../authentication';
import { authenticationApi } from './services';

const modulesReducer = combineReducers({
  authenticationSlice
});

export const store = configureStore({
  reducer: {
    modulesReducer,
    [authenticationApi.reducerPath]: authenticationApi.reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(authenticationApi.middleware),
});

export default modulesReducer;

Any idea ?

0 Answers
Related