How to implement redux in React.js

Today we’ll show you how to implement redux in React.js. Most of the developers get confused about the implementation of the redux. So today we will show you the redux example step by step.

How to implement redux in React.js, React Redux Tutorial or Example for Beginners, Redux with real-life examples, Integrate redux into your existing react app, use redux concepts in react js, react redux example from scratch, react redux example.

What is Redux?

There are multiple definitions in the market but in simple words we can say Redux is used to manage the data at application level in store. Redux will help us to consume and update the store data from any component.

Without wasting time in definition, let’s jump on example.

Steps to implement redux in React.js

  1. Overview of redux example
  2. Setup react application
  3. Install redux dependencies
  4. Project structure
  5. Create action types
  6. Create actions
  7. Create reducers
  8. Combine multiple reducers
  9. Create store
  10. Make redux store available to the application
  11. Connect component with the store
  12. Output

1. Overview of redux example

In this article, We are planning to create a simple React application using multiple components like Header, Sidebar, Footer and Content etc.

Now we would like to connect applications with store and consume or update state from several components. The store will contain a counter and tagline.

  • Counter – Counter will be added in the Content and Sidebar component. Where we can increase or decrease counter from Content component and reset counter from Sidebar component only. The counter value will appear the same throughout the application.
  • Tagline – We can have ability to update tagline from Content component and display it in the Header component.

2. Setup react application

First, we have to create a simple react application which contains multiple components. Please refer below link for your reference.

Create React Application using Multiple Components

3. Install redux dependencies

In order to implement redux, we have to install redux dependencies. Run the command below.

4. Project structure

Follow the below project structure for redux example.

  • actions folder – In this folder we’ll add action types and several actions.
  • reducers folder – Here we’ll store all types of reducers and combine it for store creation.
  • pages folder – Used to manage components like Header, Footer etc.
  • store.js file – Used to create a store for redux application.
Project Structure - Clue Mediator
Project Structure – Clue Mediator

5. Create action types

The action type is nothing but the constant value or unique key which will be used in action and reducer to update the value in store.

Create an actions directory and add a new file name as actionTypes.js where we will define the type of all the action and use it in actions and reducers.

actions/actionTypes.js

6. Create actions

The action returns the simple object to the reducer which contains type and payload. By the use of type & payload, we can update the state in store with the help of reducer.

In today’s example, we’ll create two actions. One for counter (counterActions.js) and another for tagline (headActions.js).

actions/counterActions.js

actions/headActions.js

7. Create reducers

In simple words, reducer is a function which receives the new value to update the state in store based on action type and payload.

So let’s create a directory name as reducers and within the directory, create reducers for counter and tagline where we’ll write the switch case to update the store based on given action type and payload.

reducers/counterReducer.js

reducers/headReducer.js

8. Combine multiple reducers

Now combine all reducers together in a single file name as index.js and export it for the store.

reducers/index.js

9. Create store

We have to create a store with the help of the combined reducers. In order to do it, we have to create a store.js file at the root level of the project.

store.js

10. Make redux store available to the application

At last, we have to make the redux store available to the entire application. For that redux provide <Provider />, Which helps you to link the store with the react application. You have to slightly update the code in index.js file.

index.js

11. Connect component with the store

Redux provides a connect function to connect your component to the store. With the help of connect, we can map store state to the props and map dispatch methods to the props.

Now let’s update the existing components to connect with store based on needs.

Header component:

Fetch tagline from store and display it in Header component. For that we have to map state to props and display tagline by the use of the props.

pages/Header.js

Sidebar component:

Now get count for counter from store to display it in Sidebar component and also use resetCounter action from actions/counterActions.js to reset the count of the counter in the store.

pages/Sidebar.js

Content component:

At last, we’ll fetch the count for the counter from store to display it and additionally we’ll add two buttons for increment and decrement the count. For that we have to use incrementCounter and decrementCounter action from actions/counterActions.js.

Also, we would like to provide the functionality to update the tagline with the help of text input and button elements. By pressing the button, we’ll update the tagline in store and it will auto reflect in the header once it is updated in store.

To accomplish this functionality, we have to use incrementCounter, decrementCounter & setTagline from actions.

pages/Content.js

12. Output

Run the project and check the output.

Output - How to implement redux in React.js - Clue Mediator
Output – How to implement redux in React.js – Clue Mediator

That’s it for today. In the next article, we will show you the API call with redux.
Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *