Getting Started with Redux in React: A Quick Installation and Setup Guide

As a React developer, you’ve probably heard of Redux, a popular state management library that helps you manage your application’s state in a predictable and efficient way. Today we’ll walk through a quick and easy installation and setup process for Redux in a React project.

Installing Redux

To get started with Redux, we need to install the Redux Toolkit package and react-redux package. Here’s how:

1. Open the terminal and navigate to your project directory.
2. Run the following command to install the Redux Toolkit and react-redux:

npm install @reduxjs/toolkit react-redux

Setting Up Redux

Now that we have Redux installed, let’s set it up in our React project. Here’s what we need to do:

Create a new file called store.js in the project directory. This file will contain our Redux store.

store.js

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Next, create a new file called index.js in the project directory. This file will contain our React app. In this example, we’re wrapping our App component with the Provider component from react-redux. The Provider component makes our app’s store available to all of our components.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store} >
    <App />
  </Provider>,
  document.getElementById('root')
);

Now make a file called counterSlice.js, which will be the specific part of the counter state which is managed by the Redux store. It contains an initial value of 0 as well as reducer functions, increment and decrement, which change the state of the numerical value being counted.

counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

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

export const { increment, decrement } = counterSlice.actions

export default counterSlice.reducer

Next, make Counter.js component in the project directory:

Counter.js

import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Finally, go to App.js and replace all the existing content with the following code:

App.js

import './App.css';
import { Counter } from './Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

If we check the browser, we will see the counter with the Increment and Decrement buttons:

Conclusion

That’s it! We’ve successfully installed and set up Redux in our React project. With these steps, you should now have a basic understanding of how to use Redux in your React projects.