How to Set Up Redux Toolkit in a React App From Scratch

How to Set Up Redux Toolkit in a React App From Scratch

Setting up Redux Toolkit in a React app is straightforward. Here is a step-by-step guide.

Step 1: Install the Packages

Install @reduxjs/toolkit and react-redux. These two packages give you the store utilities and the React bindings.

Step 2: Create a Slice

Use createSlice to define a feature's state and reducers in one place. It auto-generates action creators for you. A cart slice might have items and add and remove reducers.

Step 3: Configure the Store

Use configureStore to create the store, combining your slices under their keys. configureStore sets up sensible defaults like DevTools and middleware for you.

Step 4: Provide the Store

Wrap your app in a Provider from react-redux, passing the store. This makes the store available to all components.

Step 5: Read State With useSelector

In a component, use the useSelector hook to read the part of state you need. Select only the slice you need to avoid unnecessary re-renders.

Step 6: Dispatch Actions With useDispatch

Use the useDispatch hook to get the dispatch function, and call it with action creators from your slice to update state.

Step 7: Handle Async With createAsyncThunk

For async logic like fetching data, use createAsyncThunk, and handle its pending, fulfilled, and rejected cases in extraReducers.

The Takeaway

Install the packages, create slices with createSlice, configure the store, provide it, read state with useSelector, dispatch actions with useDispatch, and handle async with createAsyncThunk. That is the full RTK setup.