Redux - Installation

Redux - Installation

Prerequisites

Before installing Redux, ensure you have Node.js and a package manager (npm, Yarn, or pnpm) installed. Node.js includes npm by default.

• Visit https://nodejs.org/ to download and install the latest LTS (Long Term Support) version for your operating system.
• Follow the installer instructions.
• Verify the installation by opening your terminal or command prompt and typing:
• node -v (Should display the Node.js version)
• npm -v (Should display the npm version)

Installing Redux Toolkit (Recommended)

The official, recommended way to use Redux is with Redux Toolkit (@reduxjs/toolkit). It includes the Redux core, essential middleware (like Thunk), and utilities to simplify reducer logic and store setup.

Run one of the following commands in your project directory:

# With npm
npm install @reduxjs/toolkit

# With Yarn
yarn add @reduxjs/toolkit

# With pnpm
pnpm add @reduxjs/toolkit

Integrating with React

If you are using Redux with React (the most common use case), you also need the official React Redux bindings library (react-redux). This library provides components and hooks (like <Provider>, useSelector, useDispatch) to connect your React components to the Redux store.

# With npm
npm install react-redux

# With Yarn
yarn add react-redux

# With pnpm
pnpm add react-redux

So, for a typical React project, you’ll usually install both:

npm install @reduxjs/toolkit react-redux
# or
yarn add @reduxjs/toolkit react-redux
# or
pnpm add @reduxjs/toolkit react-redux

Setting Up Redux DevTools

For debugging, the Redux DevTools Extension is highly recommended. You don’t install this via npm/yarn; it’s a browser extension.

• Install the extension for your browser (Chrome, Firefox, Edge, etc.). Links are available in the ‘Redux - Devtools’ section of this tutorial or via a web search for ‘Redux DevTools Extension’.
• If you use @reduxjs/toolkit, the DevTools integration is automatically enabled in development mode when you use configureStore. No extra package installation or code configuration is typically needed for the extension to work.

Legacy Installation (Not Recommended for New Projects)

If you needed to install the Redux core library without the Toolkit (for older projects or specific reasons), you would install the redux package:

# Legacy - Installs only the Redux core
npm install redux
# or
yarn add redux
# or
pnpm add redux

However, using @reduxjs/toolkit is strongly advised for all new Redux applications as it sets up the store with best practices and reduces boilerplate significantly.