How to Manage Global State with Redux Toolkit

Redux is appropriate when multiple unrelated components need access to the same state, when state changes need to be predictable and traceable, or when the application is large enough that prop drilling and Context become difficult to manage. For simple apps, useState and Context are usually sufficient.

Install both @reduxjs/toolkit and react-redux packages. Redux Toolkit is the modern official way to write Redux and eliminates most of the boilerplate of traditional Redux. React-Redux provides the hooks that connect your React components to the Redux store.

A slice represents one section of your application state. Use createSlice from Redux Toolkit and provide it with a name, an initialState object, and a reducers object. Inside reducers, define functions that describe how the state changes for each possible action. Redux Toolkit uses Immer internally, so you can write mutating syntax safely inside reducers.

createSlice automatically generates action creators for each function you defined in reducers. Export these action creators from the slice file so components can dispatch them. Also export the reducer itself, which will be registered in the store.

Use configureStore from Redux Toolkit to create the global store. Pass a reducer object where each key represents a slice name and each value is the reducer exported from that slice. The store holds the entire application state tree and is the single source of truth.

Import the Provider component from react-redux and the store you created. Wrap your entire application with the Provider and pass the store as the store prop. Every component inside the Provider can now access the Redux store through hooks.

In any component, import useSelector from react-redux. Call it with a selector function that receives the entire Redux state and returns the specific piece your component needs. The component automatically re-renders when the selected value changes, similar to how useState triggers re-renders.

Import useDispatch from react-redux and call it inside your component to get the dispatch function. When the user performs an action, call dispatch with the imported action creator from your slice, passing any necessary payload. Redux updates the state and all subscribed components re-render with the new values.