Use Redux with React in Easy Steps

Redux is one of the most popular state management tool for React applications. Many world-famous companies are using React, such as Airbnb, Instagram, and Strava. Dan Abramov and Andrew Clark create Redux in 2015.

We use Redux for managing both the data and UI of React applications and provide an easy way for developers to manage state in their applications. In this blog, we’ll walk through the steps to use Redux in easy steps.

Step 1: Create React app

The first step to using Redux is to create a React app. You can do this by running the following command in the terminal:

npx create-react-app my-app

This will create a new React application titled “my-app” in the directory where you ran the command.

Step 2: Install Redux

The second step is to install the Redux library. To do that, you need to run the following command in the terminal:

npm install redux

This will install the latest version of Redux on your machine, which is needed for your React application to interact with Redux.

Step 3: Configure Redux

Once you have the Redux library installed, the next step is to configure it in your React application. To do this, you need to create a new file, called “store.js” and add the following code:

import { createStore } from 'redux';

// Reducer
function homeReducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

// Store
const store = createStore(homeReducer);

export default store;

This code creates a Redux store, which is the central object that holds the application’s state and allows you to access and manipulate it. We will look at how to create a reducer and manipulate state in future steps.

Step 4: Connect Redux with React

Once you have your Redux store configured, the next step is to connect your React application with it. To do this, you need to install the react-redux library, which helps React and Redux work together.

To install the library, run the following command in the terminal:

npm install react-redux

After installation, you can connect your React application to the Redux store. In your “index.js” file, add the following code:

import { Provider } from 'react-redux';
import store from './store';

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

This code connects your React application with the Redux store and allows you to access and manipulate the store’s state from within your React components.

Step 5: Create Reducers

Now that you have your Redux store connected to your React application, the next step is to create a reducer. A reducer is a function that takes in the current state and an action, and then returns a new state based on the action’s type.

To create a reducer, create a new file, called “reducers.js” and add the following code:

// Reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

export default counterReducer;

This code creates a simple counter reducer, which increments and decrements the count based on the type of action.

Step 6: Create Actions

Now that you have a reducer, the next step is to create the actions that will change the store’s state. Actions are objects that describe the type of action that should be performed, and can also contain data that is relevant to the action.

Create a new file, called “actions.js” and add the following code:

// Actions
export const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

This code creates two actions, which can be used to increment and decrement the count in the Redux store.

Step 7: Create Container Components

The next step to using Redux with React is to create container components, which are React components that are connected to the Redux store. Container components are responsible for accessing the store’s state and dispatching actions, which allows them to update the store.

Create a new file, called “container.js” and add the following code:

import { connect } from 'react-redux';
import { increment, decrement } from './actions';

// Map the store's state to the component's props
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

// Map the store's action creators to the component's props
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement()),
  };
};

// Connect the two
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

This code sets up all of the necessary functions and variables needed to connect the store and a React component.

Step 8: Create Presentational Components

The last step to using Redux is to create a presentational component. Presentational components are responsible for displaying the data and UI of the application, and are not connected to the store.

To create a presentational component, create a new file, called “Counter.jsx” and add the following code:

import React from 'react';

const Counter = (props) => {
  return (
    <div>
      <p>{props.count}</p>
      <button onClick={props.increment}>Increment</button>
      <button onClick={props.decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

This code is a simple presentational component, which displays the count from the store, as well as two buttons to increment and decrement the count.

Conclusion

Using Redux is a great way to manage the state of your application, but it can be a bit daunting at first. In this blog, we’ve gone through the steps to use Redux in easy steps.

We started by creating a React app and installing the Redux library. We then configured Redux and connected it to the React application. We created a reducer, actions, container components, and presentational components, which allowed us to display and manipulate the store’s state.

I hope this blog post will help you to use Redux. Now you have a better idea of how Redux can work together with your React application, and simplify your development.

Thank you so much for taking the time to read my blog post all the way through! I truly appreciate your interest and support. If you have any feedback or suggestions, please don’t hesitate to reach out. Your engagement means a lot to me

Hey!, Do you know what is the difference between React and React Native?