Installing Redux in a React project

By Darío Rivera

Posted On 2026-05-05 in React

Installing Redux in an already working React project is an easy task. For the sake of this post, let’s assume you installed React following the article Creating a React Project from Scratch.

Installing Dependencies

We just need two dependencies, the Redux Toolkit, an agnostic library to use Redux anywhere, and react-redux, a convenient library that facilitates Redux tasks on React projects. You can use the following command to install both:

npm install @reduxjs/toolkit react-redux

Configuring The Store

A store holds the whole state tree of your application. An empty store would be enough for installation purposes. The following code needs to be added in the main file of your application. First, we import the necessary software artifacts.

import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';

Now, add the following anywhere before the createRoot function.

const store = configureStore({
  reducer: {},
});

Then, in the render function, we'll incorporate the Provider jsx tag passing the store parameter as follows:

const root = createRoot(document.getElementById("app"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Adding slices

The term "slice" refers to dividing the global root Redux state into smaller parts based on functional areas. It's like breaking down the store into small, manageable pieces. Adding slices from this point is very simple, let's use the following boilerplate in a separate file called counter.js.

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions;
export default counterSlice.reducer;

Then, in the main file incorporate this slice into the store configuration.

import counterReducer from "./src/counter";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Firing actions

To trigger actions and let Redux know the state needs to change, the first step is importing the specific slice in the target component and the function useDispatch.

import { useDispatch } from 'react-redux';
import { incremented, decremented } from '../src/counter';

Then, inside a function component the imported functions need to be executed.

const dispatch = useDispatch();

And finally, inside a button or any other interactive element the specific action can be triggered.

dispatch(incremented());

Tp dive deeper, there's a working example in the article Counter App in React with Redux.

Installing Dependencies

Configuring The Store

Adding slices

Firing actions

Categories