Learn Redux - Setup, Store & Provider

#Introduction

The first two episodes gave you the theory and the architectural map. Now it's time to write real code. Episode 3 is the first step every Redux application uses: creating the store and connecting it to React.

We'll use configureStore, wrap the application with Provider from react-redux, and organize a clean project structure using the app/ and features/ pattern. By the end of this episode, you'll have a store that actually runs — even though there aren't any slices filling state in it yet.

#Creating a Store with configureStore

#Your First Store

configureStore is the official way to create a store in Redux Toolkit. It does a lot automatically that used to require manual setup: installs default middleware, connects Redux DevTools, and combines reducers.

Create app/store.ts

import { configureStore } from "@reduxjs/toolkit"
 
export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})
 
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

configureStore accepts a configuration object; the reducer property can be a single reducer or a map of named reducers. export type RootState and AppDispatch will be used for typing — full details in episode 7.

#Default Middleware and DevTools

With no configuration at all, configureStore already installs:

• Redux Thunk for async actions.
• Serializability and immutability checks in development mode.
• Redux DevTools, automatically connected to the browser extension.

Adding custom middleware

import logger from "redux-logger"
 
export const store = configureStore({
  reducer: {},
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
})

getDefaultMiddleware().concat(logger) is the pattern for inserting extra middleware alongside the defaults. This approach is used in episodes 12 and 16.

#Wrapping the Application with Provider

The store can't be read by components until we wrap the application with Provider from react-redux. Provider accepts the store prop and makes the store available across the entire component tree.

Wrap the app in main.tsx

import { Provider } from "react-redux"
import { store } from "./app/store"
 
createRoot(document.getElementById("root")!).render(
  <Provider store={store}>
    <App />
  </Provider>,
)

<Provider store={store}> makes the store accessible from any component through the useSelector and useDispatch hooks — with no prop drilling at all. Provider is usually placed as high as possible, right at the root of the application.

#Project Structure: app and features

#The app Folder for the Store

The pattern recommended by the Redux team is to separate the app/ and features/ folders:

src/
  app/
    store.ts
  features/
    counter/
      counterSlice.ts
      Counter.tsx
  main.tsx

app/ holds application-global concerns: store creation and, later, typed hooks like useAppSelector. It doesn't contain feature logic.

#The features Folder for Per-Feature Slices

features/ holds one folder per feature. Each folder contains the slice, components, and supporting files that belong only to that feature. The counter slice, the Counter component, and its tests live together in features/counter/.

This pattern is called feature-based folders. Its advantage: features can be moved, removed, or lazy-loaded independently. We'll cover combining this pattern with combineSlices for lazy loading in episode 11.

#Verifying the Store Works

Check that the whole chain is connected by running the application:

npm run dev

Open Redux DevTools in the browser. You'll see a tab showing an empty store or a store containing the newly created slice. If DevTools displays the state, Provider and the store are connected correctly.

#Conclusion

Episode 3 completes the Redux infrastructure foundation: the store is created with configureStore, the application is wrapped with Provider, and the app/ and features/ folder structure is ready to use. This empty store will start filling up in the next episode.

Key takeaways:

• configureStore creates a store with default middleware and DevTools automatically.
• middleware: (getDefaultMiddleware) => ... is how you insert additional middleware.
• Provider from react-redux provides the store to every component.
• Place Provider at the root of the application.
• The app/ folder for the store; the features/ folder for per-feature slices.
• Verify a successful setup through Redux DevTools in the browser.

In the next episode, episode 4, we'll fill that store with createSlice and reducers — writing your first slice with name, initialState, and reducers, experiencing the ease of draft mutation thanks to Immer, and handling external actions through extraReducers.