{"id":3647,"date":"2018-07-05T11:29:29","date_gmt":"2018-07-05T11:29:29","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=3647"},"modified":"2020-12-01T18:52:04","modified_gmt":"2020-12-01T13:22:04","slug":"react-with-redux-step-by-step-with-tasky-app","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/","title":{"rendered":"React with Redux &#8211; Step by Step with Tasky App!"},"content":{"rendered":"\n<p>When I first started learning Redux with React, I wish I could find the simplest tutorial ever with full functional Example ??&#8230;.. Don&#8217;t be fooled by all the fancy talk about reducers, store, actions? &#8211; Redux is incredibly simple.<\/p>\n\n\n\n<p>By the end of this blog You will get one <a href=\"https:\/\/github.com\/jinalshah159\/TaskyApp\" target=\"_blank\" rel=\"noopener noreferrer\">Tasky application<\/a> like,<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"266\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Tasky-application.gif\" alt=\"Tasky application\" class=\"wp-image-12924\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Why I need redux in My React Application?<\/h2>\n\n\n\n<p>You can manage your whole application with states and props but managing this ever-changing state is hard.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update.<\/p><\/blockquote>\n\n\n\n<p>At some point, you will no longer understand what happens in your app as you have lost control over the when, why, and how of its state.<\/p>\n\n\n\n<p>This is the main motivation to learn redux in React Application.<\/p>\n\n\n\n<p>Let&#8217;s first discuss some core concept of Redux, Then we will quick start to make Tasky App.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"304\" height=\"166\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/concept-of-Redux.png\" alt=\"concept of Redux\" class=\"wp-image-12925\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/concept-of-Redux.png 304w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/concept-of-Redux-300x164.png 300w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/><\/figure><\/div>\n\n\n\n<p><b>Store:<\/b> One big object contain all application States.<\/p>\n\n\n\n<p><b>Actions:<\/b> User will perform action like calling webservice, press button or refresh the list.<\/p>\n\n\n\n<p><b>Reducers:<\/b> All action will call related reducers and Reducer will update the store.<\/p>\n\n\n\n<p><b>UI:<\/b> when we connect our UI components to store it will reflect the changes as reducer update store data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to create React native app with Redux from scratch?<\/h3>\n\n\n\n<p>Now coming to our Tasky App!<\/p>\n\n\n\n<p><b>Create React app<\/b><\/p>\n\n\n\n<p>If you already setup the react-cli then open terminal and run<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><code>create-react-app taskyapp<br>\ncd taskyapp<br>\nnpm start<\/code><\/p><\/blockquote>\n\n\n\n<p>If you have not setup the react then follow instruction on <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html\" target=\"_blank\" rel=\"noopener noreferrer\">Setup ReactJS<\/a>.<\/p>\n\n\n\n<p><b>Install and configure Redux<\/b><\/p>\n\n\n\n<p>Redux is simple library and we need to use it with react, We will use package called <i>react-redux<\/i><\/p>\n\n\n\n<p>Install related node packages by <i>npm<\/i> or <i>yarn<\/i>.<\/p>\n\n\n\n<p><i><code>npm install - save redux react-redux react-router-dom redux-thunk redux-persist redux-logger lodash react-bootstrap<\/code><\/i><\/p>\n\n\n\n<p><b>Packages info<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.npmjs.com\/package\/redux\" target=\"_blank\" rel=\"noopener noreferrer\">redux<\/a>: library for implementation of redux<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/react-redux\" target=\"_blank\" rel=\"noopener noreferrer\">react-redux<\/a>: combine redux with react<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/react-router-dom\" target=\"_blank\" rel=\"noopener noreferrer\">react-router-dom<\/a>: used for navigation in react application<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/redux-thunk\" target=\"_blank\" rel=\"noopener noreferrer\">redux-thunk<\/a>: redux directly do not support asynchronous coding, So we need to use this. We can also use redux-saga instead of it.<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/redux-persist\" target=\"_blank\" rel=\"noopener noreferrer\">redux-persist<\/a>: It will make our store object persistent.<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/redux-logger\" target=\"_blank\" rel=\"noopener noreferrer\">redux-logger<\/a>: it will create console log for every action user dispatch.<\/li><li><a href=\"https:\/\/lodash.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">lodash<\/a>: javascript library for manipulating array.<\/li><li><a href=\"https:\/\/react-bootstrap.github.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">React-bootstrap<\/a>: using bootstrap classes in React application.<\/li><\/ul>\n\n\n\n<p>Add bootstrap linking in <i>public\/index.html<\/i> by adding following code.<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/ac258abeb95e23722198b9b601234ae1.js\"><\/script><\/p>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">public\/index.html<\/h6>\n\n\n\n<p>And for other linking method go to <a href=\"https:\/\/react-bootstrap.github.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">React-bootstrap<\/a>.<\/p>\n\n\n\n<p>Make <i>src\/actions<\/i>, <i>src\/reducers<\/i>, <i>src\/screens<\/i>, <i>src\/component<\/i>, <i>src\/store<\/i> folders.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><code>mkdir actions reducers store containers components<br>\ntouch actions\/index.js store\/store.js reducers\/index.js containers\/main.js containers\/tasky.js<\/code><\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Wire your redux &#8211; store, action, containers and reducers<\/h3>\n\n\n\n<p>Make store\/store.js file.and add the following code.<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/6ae5c21017c5fae5dec7af4eaa1f1484.js\"><\/script><\/p>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">store.js<\/h6>\n\n\n\n<ul class=\"wp-block-list\"><li>First we import <i>combineReducer<\/i> from reducer index which we are going to write later in this blog.<\/li><li>In <i>persistConfig<\/i>, we are using local storage to save our store data So, Store data will not initialize every time.<\/li><li>Then we will make array of middleware and adding <i>react-logger<\/i> middleware only in development purpose for generate logs of all actions trigger by user.<\/li><li>Then <i>createStore<\/i> with persistent combine reducer and middleware and export it.<\/li><\/ul>\n\n\n\n<p>Make <i>reducer\/index.js<\/i> file.and add the following code:<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/2f8259752b0aa1f1f8ae3f1812df7c7a.js\"><\/script><\/p>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">reducer\/index.js<\/h6>\n\n\n\n<ul class=\"wp-block-list\"><li>Import <i>combineReducers<\/i> and export it,We will edit this file later.<\/li><\/ul>\n\n\n\n<p>Now it&#8217;s time to make one simple component to wrap with redux provider.<\/p>\n\n\n\n<p>So lets edit file <i>containers\/Tasky.js<\/i> with below code:<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/d416102da3e0357aabe96684673c85a1.js\"><\/script><\/p>\n\n\n\n<p>Now edit <i>main.js<\/i> with below code.<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/fafe39d23a7cac3cba180defb5b5de63.js\"><\/script><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the above code we are defining routes for all application with <i><code>react-router-dom<\/code><\/i>.<\/li><li>In <i><code>&lt;Router&gt;<\/code><\/i> tag we are defining <i><code>&lt;Switch&gt;<\/code><\/i>.<i><code>&lt;Switch&gt;<\/code><\/i> is using to navigate only one route from the list. When we click on <i><code>&lt;Link&gt;<\/code><\/i> tag, it&#8217;s To parameter will decide which route to navigate.<\/li><\/ul>\n\n\n\n<p>Now, we are going to bind our redux store with the root component of the application. Edit <i>app.js<\/i> with the following code.<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/4ca8250b912eef74080116b1a74bf313.js\"><\/script><\/p>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">app.js<\/h6>\n\n\n\n<p>If everything is working well you will get the following output.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux.png\" alt=\"output - react with redux\" class=\"wp-image-12930\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux.png 800w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux-300x137.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux-768x351.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>You will find some logs in console screens.<\/p>\n\n\n\n<p>As we have initialize <i>redux-logger<\/i> package with our store middle-ware, It is showing logs for all actions which is dispatch. one error is showing because we have not initialize any reducer yet.<\/p>\n\n\n\n<p>Now, we are going to make some basic UI (some pure react components) as our main focus in a tutorial is redux don&#8217;t bother about components and UI design.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>cd src\/components<br>touch addTask.js filterTask.js listTask.js listComponent.js<\/p><\/blockquote>\n\n\n\n<p>Above command will create related files and edit this files with below code.<\/p>\n\n\n\n<p>First we change the add task code. Edit <i>addTask.js<\/i><br><script src=\"https:\/\/gist.github.com\/jinalshah159\/7c246a3f30465aba6da794459cf0aa78.js\"><\/script><\/p>\n\n\n\n<p>Edit <i>listTask.js<\/i><br><script src=\"https:\/\/gist.github.com\/jinalshah159\/66a9c2eceb3feecb3a17062d813c2700.js\"><\/script><\/p>\n\n\n\n<p>Edit <i>listComponent.js<\/i><br><script src=\"https:\/\/gist.github.com\/jinalshah159\/940e2882b4c4b94e93886827d5c23345.js\"><\/script><\/p>\n\n\n\n<p>Edit <i>filterTask.js<\/i><br><script src=\"https:\/\/gist.github.com\/jinalshah159\/3c39502467c978bdf4b2ad363e2f9434.js\"><\/script><\/p>\n\n\n\n<p>Now, all we need is to call all component in our tasky component.<\/p>\n\n\n\n<p>Edit <i>tasky.js<\/i> with the following code:<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/200f31eb9eb975cee8cbb36ab6e9df5c.js\"><\/script><\/p>\n\n\n\n<p>After replacing all the code when you run the application again you will get the following output.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"276\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output3.png\" alt=\"replacing all the code when you run the application again you will get the following output.\" class=\"wp-image-12926\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output3.png 800w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output3-300x104.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output3-768x265.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>Up to this, it is a simple react application. Now we will store our task list in redux store object and add edit filter and delete our task with redux actions.<\/p>\n\n\n\n<p>First we will make one reducer of a task. For that, we need to navigate to reducer directory and make file <i>taskReducer.js<\/i> and add the following code.<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/010c5f79e009ceca96a7b27694db05f1.js\"><\/script><\/p>\n\n\n\n<p>This is the basic code that every reducer contain. We can define our initial state of store object in reducer.<\/p>\n\n\n\n<p>Now we need to add this <i>taskreducer<\/i> to <i>combineReducer<\/i> and use that in store. To implement this we will edit <i>reducer\/index.js<\/i> file with the following lines:<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/7dd8dc15869e2ab83c3c1c7c80d38d08.js\"><\/script><\/p>\n\n\n\n<p>Now, we will connect <i>tasky.js<\/i> file to store.<\/p>\n\n\n\n<p>For this connect function is used it is from <i>react-redux<\/i> package. It has two parameters<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><i>mapStateToProps<\/i>: In this we get store object value in our component<\/li><li><i>mapActionToProps<\/i>: In this all actions can be registered to edit store. All actions are defined in actions files.<\/li><\/ul>\n\n\n\n<p>Now, edit <i>tasky.js<\/i> with following lines:<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/26977ad263e47fae952f9ed92144b926.js\"><\/script><\/p>\n\n\n\n<p>After connecting you will get output like this.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"333\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux-1.png\" alt=\"After connecting you will get output like this\" class=\"wp-image-12927\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux-1.png 800w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux-1-300x125.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-react-with-redux-1-768x320.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>Now work on add Task functionality.<\/p>\n\n\n\n<p>For this, first, we need to add constants of action in the index file and make one <i>taskAction.js<\/i> file in the same folder.<\/p>\n\n\n\n<p>Edit <i>actions\/index.js<\/i><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><code>export const CREATE_TASK = \"CREATE_TASK\";<\/code><\/p><\/blockquote>\n\n\n\n<p>Edit <i>action\/taskAction.js<\/i><br><script src=\"https:\/\/gist.github.com\/jinalshah159\/ecafc491bb93c7bc277cd4353018046c.js\"><\/script><\/p>\n\n\n\n<p>In taskAction, we have created one function called <i>createTask<\/i> in that we are returning one object having type and payload.<\/p>\n\n\n\n<p>So now in reducer, we need to define this type to modify the store.<\/p>\n\n\n\n<p>Now, we need to add one case for <i>createTask<\/i> in <i>taskReducer.js<\/i> file.<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/0e6160791c7bb6171a9ec560ba201b8c.js\"><\/script><\/p>\n\n\n\n<p>Now need to call that action when Add task button is clicked, So edit Tasky.js with the following code.<br><script src=\"https:\/\/gist.github.com\/jinalshah159\/fa51a74f164bf54e7b69aba020a09bdd.js\"><\/script><\/p>\n\n\n\n<p>In this way you can make actions for edit, delete and filter task<\/p>\n\n\n\n<p>You can find a working demo with all functionality on this <a href=\"https:\/\/github.com\/jinalshah159\/TaskyApp\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/www.botreetechnologies.com\/contact\" target=\"_blank\" rel=\"noopener noreferrer\">Consulting is free<\/a> &#8211; let us help you grow!<\/h3>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I first started learning Redux with React, I wish&#8230;<\/p>\n","protected":false},"author":29,"featured_media":12929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,10],"tags":[],"class_list":["post-3647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React with Redux - Step by Step with Tasky App!<\/title>\n<meta name=\"description\" content=\"When I first started learning Redux with React, I wish I could find the simplest tutorial ever with full functional Example ? Don&#039;t be fooled by all the fancy talk about reducers, store, actions? - Redux is incredibly simple.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React with Redux - Step by Step with Tasky App!\" \/>\n<meta property=\"og:description\" content=\"When I first started learning Redux with React, I wish I could find the simplest tutorial ever with full functional Example ? Don&#039;t be fooled by all the fancy talk about reducers, store, actions? - Redux is incredibly simple.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/\" \/>\n<meta property=\"og:site_name\" content=\"BoTree Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BoTreeTechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-05T11:29:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-01T13:22:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jinal Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:site\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jinal Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/\"},\"author\":{\"name\":\"Jinal Shah\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/55fbbfbd6a6cba7c885638279ab99448\"},\"headline\":\"React with Redux &#8211; Step by Step with Tasky App!\",\"datePublished\":\"2018-07-05T11:29:29+00:00\",\"dateModified\":\"2020-12-01T13:22:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/\"},\"wordCount\":1096,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg\",\"articleSection\":[\"React Native\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/\",\"name\":\"React with Redux - Step by Step with Tasky App!\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg\",\"datePublished\":\"2018-07-05T11:29:29+00:00\",\"dateModified\":\"2020-12-01T13:22:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/55fbbfbd6a6cba7c885638279ab99448\"},\"description\":\"When I first started learning Redux with React, I wish I could find the simplest tutorial ever with full functional Example ? Don't be fooled by all the fancy talk about reducers, store, actions? - Redux is incredibly simple.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"React with Redux\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React with Redux &#8211; Step by Step with Tasky App!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/\",\"name\":\"BoTree Technologies\",\"description\":\"Committed to inspire generation.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/55fbbfbd6a6cba7c885638279ab99448\",\"name\":\"Jinal Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/jinal-shah-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/jinal-shah-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/jinal-shah-150x150.png\",\"caption\":\"Jinal Shah\"},\"description\":\"Jinal Shah is a React developer. She likes to learn about new technologies. In her spare time, she loves to cook.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React with Redux - Step by Step with Tasky App!","description":"When I first started learning Redux with React, I wish I could find the simplest tutorial ever with full functional Example ? Don't be fooled by all the fancy talk about reducers, store, actions? - Redux is incredibly simple.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/","og_locale":"en_US","og_type":"article","og_title":"React with Redux - Step by Step with Tasky App!","og_description":"When I first started learning Redux with React, I wish I could find the simplest tutorial ever with full functional Example ? Don't be fooled by all the fancy talk about reducers, store, actions? - Redux is incredibly simple.","og_url":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2018-07-05T11:29:29+00:00","article_modified_time":"2020-12-01T13:22:04+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg","type":"image\/jpeg"}],"author":"Jinal Shah","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Jinal Shah","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/"},"author":{"name":"Jinal Shah","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/55fbbfbd6a6cba7c885638279ab99448"},"headline":"React with Redux &#8211; Step by Step with Tasky App!","datePublished":"2018-07-05T11:29:29+00:00","dateModified":"2020-12-01T13:22:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/"},"wordCount":1096,"commentCount":0,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg","articleSection":["React Native","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/","url":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/","name":"React with Redux - Step by Step with Tasky App!","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg","datePublished":"2018-07-05T11:29:29+00:00","dateModified":"2020-12-01T13:22:04+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/55fbbfbd6a6cba7c885638279ab99448"},"description":"When I first started learning Redux with React, I wish I could find the simplest tutorial ever with full functional Example ? Don't be fooled by all the fancy talk about reducers, store, actions? - Redux is incredibly simple.","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/07\/React-With-Redux.jpg","width":1920,"height":1280,"caption":"React with Redux"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/react-with-redux-step-by-step-with-tasky-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React with Redux &#8211; Step by Step with Tasky App!"}]},{"@type":"WebSite","@id":"https:\/\/www.botreetechnologies.com\/blog\/#website","url":"https:\/\/www.botreetechnologies.com\/blog\/","name":"BoTree Technologies","description":"Committed to inspire generation.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/55fbbfbd6a6cba7c885638279ab99448","name":"Jinal Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/jinal-shah-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/jinal-shah-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/jinal-shah-150x150.png","caption":"Jinal Shah"},"description":"Jinal Shah is a React developer. She likes to learn about new technologies. In her spare time, she loves to cook."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=3647"}],"version-history":[{"count":2,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3647\/revisions"}],"predecessor-version":[{"id":12931,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3647\/revisions\/12931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/12929"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=3647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=3647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=3647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}