What is "Creating the Store and Wiring Up Provider" about?

Create the Redux store with composeWithDevTools, then wrap the React component tree with Provider so every component can access the store without importing it directly.

What topics does "Creating the Store and Wiring Up Provider" cover?

This article covers: redux createStore, Provider react-redux, composeWithDevTools, redux store setup, react redux context.

Creating the Redux Store and Wiring Up Provider

The reducer is ready and combined. The store is the last piece before any component can read from Redux state. The action types and creators are already wired into the reducer.

Two files: store/index.js to create the store, App.js to connect it to React via Provider.

ExpandProvider wrapping the component tree with a reference to the Redux store

Creating the Store

Create src/store/index.js:

JavaScript

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import allReducers from '../reducers';

const store = createStore(allReducers, composeWithDevTools());

export default store;

createStore takes the root reducer as the first argument. As soon as the store is created, Redux calls the reducer once with (undefined, @@INIT). The default state (initialTasks) runs, and the store's initial state is set. You can confirm this immediately in the Redux DevTools browser extension: open the State tab and you will see tasks with the three initial task objects.

composeWithDevTools() is the second argument. It patches the store to communicate with the Chrome extension. Without it, DevTools shows "No store found." With it, every dispatch is logged, every state diff is visible, and you can time-travel through actions.

import allReducers from '../reducers' resolves to reducers/index.js automatically. The store does not need to know how many reducers exist. It receives allReducers as a single combined unit.

Wrapping the App with Provider

Open src/App.js:

JSX

import { Provider } from 'react-redux';
import store from './store';
import Tasks from './components/tasks/Tasks';

export default function App() {
  return (
    <Provider store={store}>
      <Tasks />
    </Provider>
  );
}

Provider is a React component from the react-redux package. It accepts one prop: store. Every component inside the Provider tree can now access the Redux store without importing it directly.

How Provider works: React Context passes the store reference through the component tree invisibly. Any component that calls useSelector or useDispatch reaches through that context to the store. The component does not know or care where the store came from. Provider handles that.

Real-world pattern: In production applications the component tree is usually wrapped in Router, Theme providers, and Auth context too:

JSX

<Provider store={store}>
  <Router>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </Router>
</Provider>

Provider sits at the outermost layer, ensuring the store is available everywhere.

Verifying in Redux DevTools

Open the app in Chrome with the Redux DevTools extension installed. Click the extension icon. You will see:

State tab: tasks array with the two initial task objects from initialTasks
Action log: one @@INIT action representing the store initialization

Nothing in the UI is interactive yet. The store exists. The state is loaded. The component tree has access through Provider. The one remaining step: reading from the store in Tasks.js using useSelector, and dispatching through useDispatch.

The Essentials

createStore(allReducers, composeWithDevTools()) creates the store with DevTools enabled. Redux immediately calls the reducer with undefined to initialize state. The initial tasks appear in DevTools before any user interaction.
store/index.js exports the store as default. Importing the store folder resolves to this file. No other file needs to call createStore. There is exactly one store in the application.
Provider wraps the entire component tree. It receives store as a prop and uses React Context to make that store available to every child. Components read and dispatch via useSelector and useDispatch. They never import the store directly.

Creating the Store and Wiring Up Provider

Creating the Store

Wrapping the App with Provider

Verifying in Redux DevTools

The Essentials

Further Reading and Watching