Redux & Redux Toolkit — App-Wide State Management

State is data that, when changed, updates the UI. It falls into three scopes based on who needs it.

Redux is a predictable state container. All shared state lives in one central store, and it changes only when an action is dispatched to a pure reducer.

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

<Provider> makes the store available to the component tree, and useSelector subscribes a component to part of the state.

useDispatch returns the store's dispatch function. Calling it with an action triggers the reducer.

createSlice defines one piece of state (a slice) with its initial state and reducers, and auto-generates the matching action creators.

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

Pre-typed versions of useSelector and useDispatch that know the store's RootState and AppDispatch.

createAsyncThunk wraps an async function and dispatches pending, fulfilled, and rejected actions automatically.

Context and Redux both share state across components, but suit different scales.