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

Classic Redux: Store and Reducer

In core Redux, you write a reducer function by hand and pass it to createStore.

Notes

The reducer receives state (with a default initial value) and action, and branches on action.type.
It must return a complete new state object. Omitting a property drops it from state.
Never mutate the existing state. Copy and return a new object.
createStore is deprecated in favor of Redux Toolkit's configureStore (Entry 7). It still works; legacy_createStore removes the deprecation warning. Learn it to understand the internals, not for new projects.

What / Why / When

What: A store built from a hand-written reducer.
Why: Shows exactly what RTK automates.
When: Legacy codebases, or to understand Redux internals.

Code compare

React

// store/index.tsimport { legacy_createStore as createStore } from "redux";export type CounterState = {  counter: number;  showCounter: boolean;};type CounterAction =  | { type: "increment" }  | { type: "decrement" }  | { type: "increase"; amount: number }  | { type: "toggle" };const initialState: CounterState = { counter: 0, showCounter: true };function counterReducer(state = initialState, action: CounterAction): CounterState {  switch (action.type) {    case "increment":      return { ...state, counter: state.counter + 1 };    case "decrement":      return { ...state, counter: state.counter - 1 };    case "increase":      return { ...state, counter: state.counter + action.amount };    case "toggle":      return { ...state, showCounter: !state.showCounter };    default:      return state;  }}const store = createStore(counterReducer);export default store;

NgRx has no hand-written switch style. Its createReducer + on() is the equivalent and is shown in Entry 6. For a small app without NgRx, the same reducer pattern fits in a service (see Context API & useReducer, Entry 5).

No Angular code for this example.

Differences and gotchas

❌ state.counter++; return state; mutates the old object. Redux compares references, so the UI may not update and DevTools history breaks.
✅ Always spread: { ...state, counter: state.counter + 1 }.

Quick reference

Task	Classic Redux
Create store	`createStore(reducer)` (deprecated)
Default state	Reducer parameter default
Unknown action	`return state`