{"id":7731,"date":"2022-02-05T08:15:28","date_gmt":"2022-02-05T08:15:28","guid":{"rendered":"https:\/\/programmingfields.com\/?p=7731"},"modified":"2022-12-03T06:18:43","modified_gmt":"2022-12-03T06:18:43","slug":"use-redux-react-redux-in-react-js-with-example","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/","title":{"rendered":"How to use Redux, React Redux in React JS with Example"},"content":{"rendered":"\n<p>Redux is the most usable library for state management in React Js. It makes our application very simplified for maintaining the state. You can access the application state in any of your components. No matter what hierarchy has that component. In this post, I will explain <strong>React Redux<\/strong>. For demonstrating it properly, I will create a basic demo of the counter app. In our previous post, we already did the React setup. Also, we saw the <a rel=\"noreferrer noopener\" href=\"https:\/\/programmingfields.com\/how-to-install-and-setup-redux-in-react-js-step-by-step\/\" target=\"_blank\">Redux Setup in React app<\/a>. I have already done the setup of the project in the previous post. Please do the setup for the project.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#When_working_with_React_Redux_you_need_to_understand_3_things\" >When working with React Redux you need to understand 3 things<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#How_React_Redux_Works\" >How React Redux Works<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#How_Store_and_Reducer_Works_in_React_Redux\" >How Store and Reducer Works in React Redux<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#Create_a_Demo_For_Counter\" >Create a Demo For Counter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#Add_Functionality_of_Counter\" >Add Functionality of Counter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#Add_Action_and_Reducer_For_Counter\" >Add Action and Reducer For Counter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#Render_Main_Component\" >Render Main Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#Result_of_Counter_App\" >Result of Counter App<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/#Bottom_Lines\" >Bottom Lines<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"when-working-with-react-redux-you-need-to-understand-3-things\"><span class=\"ez-toc-section\" id=\"When_working_with_React_Redux_you_need_to_understand_3_things\"><\/span><strong>When working with React Redux you need to understand 3 things<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Actions<\/strong>: Actions are the objects that should have the two properties. One describes the type of actions and the second describes what should be changed in the state.<\/li>\n\n\n\n<li>Reducers: These are the pure functions that&nbsp;take the actions and the previous state of the app. Reducers job is to return the new state to the application.<\/li>\n\n\n\n<li>Store: It simply manages the state of the application. It brings the actions and reducers together. It holds and changes the state of the whole application. There will be only one store for the entire application.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Redux is made up of <strong>Actions<\/strong>, <strong>Reducers<\/strong>, <strong>State<\/strong>, and <strong>Store<\/strong>. Each thing does a specific task.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/form-handling-in-react-js-using-react-hook-form-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">Form Handling in React JS Using React Hook Form Library<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-react-redux-works\"><span class=\"ez-toc-section\" id=\"How_React_Redux_Works\"><\/span><strong>How React Redux Works<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s say we have a react component that increments the value by 1&nbsp;on each button click. When we will click a button, it will call an event handler function. Shown in the below diagram.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"476\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-2.10.46-PM.png?resize=868%2C476&#038;ssl=1\" alt=\"Flow of Redux Action, Reducer, State and Store\" class=\"wp-image-7735\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-2.10.46-PM.png?w=868&amp;ssl=1 868w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-2.10.46-PM.png?resize=300%2C165&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-2.10.46-PM.png?resize=768%2C421&amp;ssl=1 768w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><figcaption class=\"wp-element-caption\"><strong>Flow of Redux Action, Reducer, State, and Store<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>This is where we dispatch an action. <strong>Dispatch<\/strong> is a function given by <strong>redux<\/strong>. So when an event handler function is called, it dispatches an action. The action contains a <strong>type<\/strong> and <strong>payload<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>type<\/strong> is nothing but the name of the action. In this case, it will be <strong>INCREMENT<\/strong>.<\/li>\n\n\n\n<li>The <strong>payload<\/strong> contains the data, that we need to know about. In this case, we increment the value by 1. So the payload is 1 (You can keep payload values 2, 3, 4&#8230; etc according to your need). It is shown in the below diagram.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"476\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-5.40.19-PM.png?resize=868%2C476&#038;ssl=1\" alt=\"React Redux - Payload and Type\" class=\"wp-image-7736\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-5.40.19-PM.png?w=868&amp;ssl=1 868w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-5.40.19-PM.png?resize=300%2C165&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-5.40.19-PM.png?resize=768%2C421&amp;ssl=1 768w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><figcaption class=\"wp-element-caption\"><strong>React Redux &#8211; Flow of Payload and Type<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Then this action will be passed to the store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-store-and-reducer-works-in-react-redux\"><span class=\"ez-toc-section\" id=\"How_Store_and_Reducer_Works_in_React_Redux\"><\/span><strong>How Store and Reducer Works in React Redux<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The store receives the action. The store is just like a database that manages the data and updates the state. In other words, it is the coordinator of updating the state based on the action.<\/p>\n\n\n\n<p>Using the <strong>reducer<\/strong> function the current state and the action will get passed. A reducer takes the current state and action from the store. It combines things together and does some work in the reducer and returns a new state. Take a look at the below diagram.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"476\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-7.01.14-PM-1.png?resize=868%2C476&#038;ssl=1\" alt=\"Flow of Redux Store and Reducer\" class=\"wp-image-7737\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-7.01.14-PM-1.png?w=868&amp;ssl=1 868w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-7.01.14-PM-1.png?resize=300%2C165&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-7.01.14-PM-1.png?resize=768%2C421&amp;ssl=1 768w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><figcaption class=\"wp-element-caption\"><strong>Flow of Redux Store and Reducer<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>The store then saves the new state which is returned from the reducer. In this case, we got <strong>1<\/strong> and pass the new state to the component. Which causes them to re-render to display the new data. Shown in the below diagram.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-7.03.09-PM.png?w=868&amp;ssl=1\" alt=\"State Returned by Redux Store\"\/><figcaption class=\"wp-element-caption\"><strong>State Returned by Redux Store<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Now let&#8217;s understand the entire flow by an example of the counter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-a-demo-for-counter\"><span class=\"ez-toc-section\" id=\"Create_a_Demo_For_Counter\"><\/span><strong>Create a Demo For Counter<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We will create a simple design like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"317\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-9.07.58-PM.png?resize=1024%2C317&#038;ssl=1\" alt=\"\" class=\"wp-image-7745\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-9.07.58-PM.png?resize=1024%2C317&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-9.07.58-PM.png?resize=300%2C93&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-9.07.58-PM.png?resize=768%2C238&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-9.07.58-PM.png?resize=1320%2C409&amp;ssl=1 1320w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-9.07.58-PM.png?w=1439&amp;ssl=1 1439w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Counter app<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>It will require creating a couple of files.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a component with the name <strong>Counter.js <\/strong>in the components folder.<\/li>\n\n\n\n<li>Now, create another folder named redux. Inside this folder, create three different folder like this-<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"basic\" class=\"language-basic\">src\n|__ components\n|       |__ Counter.js\n|\n|__ redux\n|       |__ actions\n|       |         |__ actionTypes.js\n|       |         |\n|       |         |__ index.js\n|       |\n|       |__ reducers\n|       |         |__ counterReducer.js\n|       |         |\n|       |         |__ index.js\n|       |\n|       |__ store\n|                 |__ index.js<\/code><\/pre>\n\n\n\n<p>You can see the structure in the below screenshot as well.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"319\" height=\"464\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-8.48.49-PM.png?resize=319%2C464&#038;ssl=1\" alt=\"\" class=\"wp-image-7740\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-8.48.49-PM.png?w=319&amp;ssl=1 319w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-04-at-8.48.49-PM.png?resize=206%2C300&amp;ssl=1 206w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><figcaption class=\"wp-element-caption\"><strong>Folder Structure of React Redux<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"add-functionality-of-counter\"><span class=\"ez-toc-section\" id=\"Add_Functionality_of_Counter\"><\/span><strong>Add Functionality of Counter<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, start with the <strong>Counter.js<\/strong> component. Add the below snippet.<\/p>\n\n\n\n<pre title=\"Counter.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { increment, decrement } from '..\/redux\/actions';\n\nexport const Counter = () =&gt; {\n    \nconst counter = useSelector((state) =&gt; state.counterReducer.count);\nconst dispatch = useDispatch();\n\nconst handleIncrement = () =&gt; {\n    dispatch(increment(1));\n  };\n\n  const handleDecrement = () =&gt; {\n    dispatch(decrement(1));\n  };\n\n    return (\n        &lt;div&gt;\n            &lt;h1&gt;Counter {counter} &lt;\/h1&gt;\n            &lt;button className='btnStyle' onClick={()=&gt;handleIncrement()}&gt;+&lt;\/button&gt;\n            &lt;button className='btnStyle' onClick={()=&gt;handleDecrement()}&gt;-&lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n};<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-action-and-reducer-for-counter\"><span class=\"ez-toc-section\" id=\"Add_Action_and_Reducer_For_Counter\"><\/span><strong>Add Action and Reducer For Counter<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the next step, go to the <strong>actionTypes.js<\/strong> and add the below code.<\/p>\n\n\n\n<pre title=\"actions\/actionTypes.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">export const INCREMENT = 'INCREMENT';\nexport const DECREMENT = 'DECREMENT';<\/code><\/pre>\n\n\n\n<p>After that import the actions in its <strong>index.js<\/strong> file. Here, you have to set the payload as shown below.<\/p>\n\n\n\n<pre title=\"actions\/index.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { INCREMENT, DECREMENT } from '.\/actionTypes';\n\nexport const increment = (number) =&gt; {\n  return {\n    type: INCREMENT,\n    payload: number\n  };\n};\nexport const decrement = (number) =&gt; {\n  return {\n    type: DECREMENT,\n    payload: number\n  };\n};<\/code><\/pre>\n\n\n\n<p>Next, navigate to the <strong>counterReducer.js<\/strong> and add the below code. The reducer will return the state based on the action type.<\/p>\n\n\n\n<pre title=\"reducers\/counterReducer.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">const initialState = {\n  count: 0,\n};\n\nexport const counterReducer = (state = initialState, action) =&gt; {  \n  switch (action.type) {\n    case 'INCREMENT':\n      return {\n        ...state,\n        count: state.count + action.payload\n      };\n  }\n  switch (action.type) {\n    case 'DECREMENT':\n      return {\n        ...state,\n        count: state.count - action.payload\n      };\n    default:\n      return state;\n  }\n};<\/code><\/pre>\n\n\n\n<p>Reducer needs to register in its index file. Hence, navigate to the <strong>reducers\/index.js<\/strong> file and add the below code.<\/p>\n\n\n\n<pre title=\"reducers\/index.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { combineReducers } from 'redux';\nimport counterReducer from '.\/counterReducer';\n\nexport default combineReducers({\n    counterReducer,\n})<\/code><\/pre>\n\n\n\n<p>Next, add the below code in <strong>store\/index.js<\/strong>. Here, it will create the redux store.<\/p>\n\n\n\n<pre title=\"store\/index.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { createStore } from \"redux\";\nimport rootReducer from \"..\/reducers\";\n\nconst store = createStore(\n  rootReducer,\n  window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()\n);\nexport default store;<\/code><\/pre>\n\n\n\n<p>That&#8217;s it for the redux setup. Now, come to the default <strong>index.js <\/strong>file. We will import this redux store there.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"render-main-component\"><span class=\"ez-toc-section\" id=\"Render_Main_Component\"><\/span><strong>Render Main Component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The redux store will need to import in the root of the react component. So, by default, we have the <strong>index.js<\/strong> for this. Hence, add the below code.<\/p>\n\n\n\n<pre title=\"index.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \".\/index.css\";\nimport { App } from \".\/App\";\nimport store from \".\/redux\/store\";\nimport { Provider } from \"react-redux\";\n\nReactDOM.render(\n  &lt;React.StrictMode&gt;\n    &lt;Provider store={store}&gt;\n      &lt;App \/&gt;\n    &lt;\/Provider&gt;\n  &lt;\/React.StrictMode&gt;,\n  document.getElementById(\"root\")\n);<\/code><\/pre>\n\n\n\n<p>Lastly, come to the <strong>App.js<\/strong> component and render the <strong>Counter.js<\/strong> component here.<\/p>\n\n\n\n<pre title=\"App.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import \".\/App.css\";\nimport React from \"react\";\nimport { Counter } from \".\/components\/Counter\";\n\nexport const App = () =&gt; {\n  return (\n    &lt;div className=\"app\"&gt;\n      &lt;Counter \/&gt;\n    &lt;\/div&gt;\n  );\n};<\/code><\/pre>\n\n\n\n<p>I have added basic CSS for buttons and backgrounds. So, it is optional.<\/p>\n\n\n\n<pre title=\"App.css\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.app {\n  text-align: center;\n  margin: 5% 20%;\n  background-color: #f2aa4cff;\n  color: black;\n  height: 200px;\n  padding-top: 2%;\n  border-radius: 10px;\n}\n\n.btnStyle {\n  background-color: #a9a9a9;\n  color: black;\n  width: 20%;\n  font-size: 35px;\n  margin-right: 20px;\n  border: none;\n  border-radius: 7px;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"result-of-counter-app\"><span class=\"ez-toc-section\" id=\"Result_of_Counter_App\"><\/span><strong>Result of Counter App<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Run the application and check the result. When you will click on the increment button, the value will be incremented by 1 and the response will return from the state. Similarly, on decrementing, it will decrement by 1. In this activity, the data is coming from the redux in realtime.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"324\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/hey.gif?resize=924%2C324&#038;ssl=1\" alt=\"Final Output of Counter App\" class=\"wp-image-7785\"\/><figcaption class=\"wp-element-caption\"><strong>Final Output of Counter App<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button aligncenter is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-to-vivid-purple-gradient-background has-text-color has-background wp-element-button\" href=\"\" target=\"_blank\" rel=\"noreferrer noopener\">Download Source<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bottom-lines\"><span class=\"ez-toc-section\" id=\"Bottom_Lines\"><\/span><strong>Bottom Lines<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>That&#8217;s it for this post on React Redux. Here, we have seen the step-by-step flow of the Redux operations. We understood how the event handler dispatches the action to the reducer. The reducer returns the state based on the action type. I hope this will help you to get a basic idea of React Redux concept. In the upcoming post, we will work on some complex apps. Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Redux is the most usable library for state management in React Js. It makes our application very simplified for maintaining the state. You can access the application state in any of your components. No matter what hierarchy has that component. In this post, I will explain React Redux. For demonstrating it properly, I will create [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":7783,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1369],"tags":[2276,2282,2265,2281,2283,2279,2270,2286,2278],"yst_prominent_words":[1370,1401,706],"class_list":{"0":"post-7731","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-counter-app-using-redux","9":"tag-react-reducer","10":"tag-react-redux","11":"tag-redux-action","12":"tag-redux-action-type","13":"tag-redux-reducer","14":"tag-redux-store","15":"tag-redux-store-creator","16":"tag-state-management-using-redux","17":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2022\/02\/React-Redux-Counter-app.png?fit=2240%2C1260&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/7731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=7731"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/7731\/revisions"}],"predecessor-version":[{"id":8978,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/7731\/revisions\/8978"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/7783"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=7731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=7731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=7731"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=7731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}