Redux Install in React: Web Development

Before Redux can manage global state, it has to be wired into the React application — a one-time setup phase that becomes the foundation everything else builds on. That process breaks down into three concrete steps: installing the required packages, configuring the central store, and wrapping the app so components can actually reach it.

Once this scaffolding is in place, adding new pieces of global state later is mostly a matter of writing slices, not repeating this setup work.

Historically, setting up plain Redux required writing a large amount of boilerplate — action type constants, hand-written reducers, and manual store configuration. Today, the official recommended way to write Redux is Redux Toolkit (RTK), which wraps all of that in a much smaller, faster setup.

RTK is what modern React apps should reach for; legacy patterns like manually calling createStore from the base redux package are considered outdated for new projects.

Using Redux with React requires two separate packages, not one: @reduxjs/toolkit, which is the actual Redux engine that creates the store and reducers, and react-redux, which is the bridge library that connects that engine to React components.

Both are installed together with npm install @reduxjs/toolkit react-redux — the toolkit alone has no idea React exists, and react-redux alone has nothing to connect to without a store built by the toolkit.

Running npm install @reduxjs/toolkit react-redux in the terminal downloads both packages into node_modules and records them as dependencies in package.json. This is a standard npm install like any other package — nothing Redux-specific happens at this stage beyond fetching the code.

Once the install finishes without errors, the packages are ready to be imported and used to build the store and connect it to React.

With the packages installed, the next step is creating a dedicated file for the central store — by convention, src/store/index.js (or .ts). This file is where the app's global "brain" gets defined, separate from any individual component.

Keeping the store in its own file, rather than inline inside a component, makes it easy to import from anywhere in the app and keeps store configuration isolated from UI code.

Inside the store file, configureStore from RTK does the heavy lifting: it creates the store, wires up the Redux DevTools automatically, and adds sensible default middleware — all from a single function call that takes a reducer object (initially empty, until slices are added later).

With the store built, the final step is importing Provider from react-redux at the top level of the app and wrapping <App /> in <Provider store={store}>, which broadcasts the store to every component in the tree via React Context — completing the setup so any component can now read or dispatch to Redux.

Welcome to Redux Setup. Before we can start managing global state with Redux, we have to wire it into our React application. This is a one-time setup phase that acts as the foundation for the rest of our app.

Legacy Redux vs RTK. Historically, setting up Redux was notoriously difficult and required writing tons of boilerplate code. Today, the official standard is Redux Toolkit (RTK), which makes setup incredibly fast and simple.

The Required Packages. To use Redux with React, you need TWO separate packages: @reduxjs/toolkit (the actual Redux engine) and react-redux (the bridge that connects the engine to React components).

Which package serves as the 'bridge' that allows React components to talk to the Redux store?

• →@reduxjs/toolkit
• →react-redux

Installing via NPM. Open your terminal and run the install command. This will download both packages into your node_modules folder and add them to your package.json dependencies.

Creating the Store File. Once installed, the first step is to create a file for the central store. By convention, this is usually placed in src/store/index.js (or .ts). This file will define the global Brain of your app.

configureStore(). Inside that file, import configureStore from RTK. This powerful function does all the heavy lifting: it creates the store, sets up React Developer Tools automatically, and adds default middleware.

Empty Reducers. The only required configuration inside configureStore is the reducer object. For now, we'll leave it empty. Later, we'll import 'slices' and plug them in here.

Which function from @reduxjs/toolkit creates the global state container?

• →createState
• →configureStore

Connecting to React. We have a store, but React has no idea it exists! To connect them, we go to the very top level of our React application (usually main.jsx or index.js).

The Provider Component. The react-redux package gives us a special component called <Provider>. This component wraps around your <App /> and uses React Context under the hood to broadcast the Redux store to the entire tree.

What prop MUST you pass to the <Provider> component so it knows what data to broadcast?

• →state
• →store

Wrapping the App. We pass our created store into the store prop of the <Provider>. Once this is done, any component, anywhere in <App />, can tap into Redux.

React + Redux United. That's it! The setup phase is complete. We've created the engine (configureStore) and built the bridge (Provider). The app is completely unaware of Redux, until a specific component chooses to connect to it.

Setup Complete. Excellent work! Now that the infrastructure is in place, we can move on to actually creating global state and writing logic using 'Slices'.