Redux & Redux Toolkit — App-Wide State ManagementEntry 11 of 11
Summary
| Concept | Redux Toolkit | NgRx |
|---|---|---|
| Store setup | configureStore() | provideStore() |
| Provide to app | <Provider store={store}> | app.config.ts providers |
| State + reducers | createSlice() | createFeature() + createReducer() |
| Actions | slice.actions (auto) | createActionGroup() |
| Immutability | Immer | Manual spread |
| Read state | useAppSelector() | store.selectSignal() |
| Dispatch | useAppDispatch() | store.dispatch() |
| Async | createAsyncThunk() | createEffect() + service |
| DevTools | Built in | provideStoreDevtools() |
Redux Toolkit and NgRx share the same architecture: one store, immutable state, pure reducers, and actions as the only way to change state. The main difference is that NgRx builds on RxJS and Angular's DI, keeps actions separate from reducers, and moves async work into effects that call services.