How to Install Redux Toolkit in React Projects

To install @reduxjs/toolkit in a React project, run npm install @reduxjs/toolkit react-redux or yarn add @reduxjs/toolkit react-redux. This installs Redux Toolkit and React bindings needed to manage state easily.

Syntax

Use your terminal to run one of these commands depending on your package manager:

• npm install @reduxjs/toolkit react-redux - Installs Redux Toolkit and React bindings using npm.
• yarn add @reduxjs/toolkit react-redux - Installs the same packages using yarn.

@reduxjs/toolkit is the official package for Redux Toolkit. react-redux connects Redux with React components.

bash

npm install @reduxjs/toolkit react-redux

Example

This example shows how to install Redux Toolkit and verify it by creating a simple store in a React app.

javascript

/* Run this in your terminal to install packages */
npm install @reduxjs/toolkit react-redux

/* Then create a file store.js */
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({
  reducer: counterSlice.reducer
});

export default store;

/* In your React component file App.js */
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store, { increment, decrement } from './store';

function Counter() {
  const count = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

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

Output

A React app showing a count number starting at 0 with two buttons labeled Increment and Decrement that update the count when clicked.

Common Pitfalls

Some common mistakes when installing Redux Toolkit include:

• Forgetting to install react-redux along with @reduxjs/toolkit. Both are needed for React integration.
• Running the install command outside your project folder, causing packages to install globally or in the wrong place.
• Not wrapping your React app with the <Provider> component from react-redux, which is required to access the store.

bash/javascript

/* Wrong: Missing react-redux install */
npm install @reduxjs/toolkit

/* Right: Install both packages */
npm install @reduxjs/toolkit react-redux

/* Wrong: Not using Provider in React */
// React component without Provider will not access store

/* Right: Wrap app with Provider */
import { Provider } from 'react-redux';
<Provider store={store}>
  <App />
</Provider>

Quick Reference

Summary tips for installing Redux Toolkit:

• Use npm install @reduxjs/toolkit react-redux or yarn add @reduxjs/toolkit react-redux.
• Always install both packages together for React projects.
• Wrap your React app with <Provider> from react-redux.
• Check your terminal is in the project folder before installing.

Key Takeaways

Install both @reduxjs/toolkit and react-redux packages together for React apps.

Run the install command inside your project folder to add packages locally.

Wrap your React app with from react-redux to connect the store.

Use npm or yarn depending on your project setup for package management.

Verify installation by creating a simple store and using it in a React component.