Redux & Redux Toolkit — App-Wide State ManagementEntry 7 of 11

Multiple Slices with `configureStore`

configureStore combines several slice reducers into one store, with DevTools and thunk middleware set up automatically.

Notes

One store, many slices. Each slice lives in its own file.
Pass an object map to reducer; each key becomes a top-level state branch.
State becomes nested: state.counter.counter, state.auth.isAuthenticated.
Export each slice's actions and reducer; import only the reducer into the store.
Scalable structure: create slices → configure store → provide to <App /> → create typed hooks (Entry 8) → consume in components.

What / Why / When

What: Combining independent state slices.
Why: Features stay isolated and testable, but share one store and one DevTools timeline.
When: More than one domain of shared state (auth + cart + UI).

Code compare

React

// store/auth-slice.tsimport { createSlice } from "@reduxjs/toolkit";const authSlice = createSlice({  name: "auth",  initialState: { isAuthenticated: false },  reducers: {    login(state) {      state.isAuthenticated = true;    },    logout(state) {      state.isAuthenticated = false;    },  },});export const authActions = authSlice.actions;export default authSlice.reducer;

React

// store/index.tsimport { configureStore } from "@reduxjs/toolkit";import counterReducer from "./counter-slice";import authReducer from "./auth-slice";export const store = configureStore({  reducer: {    counter: counterReducer,    auth: authReducer,  },});export type RootState = ReturnType<typeof store.getState>;export type AppDispatch = typeof store.dispatch;

React

store/├── index.ts          // configureStore + RootState/AppDispatch├── hooks.ts          // typed hooks (Entry 8)├── counter-slice.ts└── auth-slice.ts

Angular

// app.config.tsimport { provideStore } from "@ngrx/store";import { counterFeature } from "./store/counter.feature";import { authFeature } from "./store/auth.feature";export const appConfig: ApplicationConfig = {  providers: [    provideStore({      [counterFeature.name]: counterFeature.reducer,      [authFeature.name]: authFeature.reducer,    }),  ],};

Features can also be registered lazily on a route with provideState(authFeature), so their state loads only with that route.

Differences and gotchas

After moving to multiple slices, update selectors: state.counter becomes state.counter.counter. A common bug when refactoring.
NgRx's provideState() on lazy routes has no built-in RTK equivalent (RTK offers combineSlices + inject for code-splitting).

Quick reference

Task	Redux Toolkit	NgRx
Combine slices	`configureStore({ reducer: { a, b } })`	`provideStore({ a, b })`
Lazy feature	`combineSlices().inject()`	`provideState(feature)` on a route
Root state type	`ReturnType<typeof store.getState>`	Inferred by feature selectors