Njeshe Amal “ARTicle” blog

If you want to go quickly, go alone. If you want to go far, go together.




CONTENTS

· An Informal Introduction
· To Bootstrap, or Not To

· Redux: What The Flow?

· Get Started: Node/Express

· REST



BAKIN MASANIYA
Computer scientist, Lisa Gelobter, assisted with the 1995 creation of Shockwave, essential technology that led to the development of web animation. (So, we have her to thank for GIFs).

Every morning, a gazelle wakes up. It knows it must run faster than the fastest lion or it will be killed. Every morning, a lion wakes up. It knows it must outrun the slowest gazelle or it will starve to death. It doesn’t matter whether you’re a lion or gazelle. When the sun comes up, you’d better be running.

︎  ︎  




Home
ART—icle 03

Redux: What The Flow?

Understanding asynchronous data flow with Redux.

Redux Logo

Assumptions: 
1. You have some basic understanding of programming principles.
3. You are working with Redux AND React.
Useful if:
1. You are struggling to understand the concept of asynchronicity as it pertains to a React-Redux application. 
2. You want understand how data flows from a backend API to the frontend.
For this guide, I will be sharing my experience based on the React-Redux single page application I built for a project at Flatiron School. If you are using Angular, Vue, etc, you may have to do extra research as to how it all applies in that context. SNS. As this is an overview, you can expect links to documentation for deeper learning. If all things go well, there might even be some screenshots thrown in too.


SYNC vs. ASYNC


What is synchronous?

A synchronous code is executed sequentially. This means that one statement starts and completes, THEN another statement can start and complete.
What is asynchronous?

Asynchronous code does not have a wait queue. One process can start even before the process before it has completed. An example of this is a fetch request.
Example of a fetch request in React-Redux app

Why is asynchronicity so important?

Sometimes, functions depend on data from other functions. In the above example, some component that is responsible for rendering all the shops is expecting to get the updated list of shops from the Redux store. If we did things one at a time, ie synchronously, then application could be shut down as one process waits on another, from the perspective of a user <insert dreaded loading symbol>. 
How does asynchronicity work in a React-Redux app?

Wow, stranger. You ask great questions. 
In a React-Redux application, the data is managed by the Redux store on the frontend. According to the Redux documentation, the redux store “only knows how to synchronously dispatch actions, update the state by calling the root reducer function, and notify the UI that something has changed. Any asynchronicity has to happen outside the store”.

       
So, what is middleware? 

When a fetch request is made in an action creator, like we did in addShops() above, that action creator returns a plain JavaScript object. Well, that simply won’t do if we want to make an asynchronous request. Middleware is a third party extension that goes between dispatching an action and the data reaching the reducer. It prevents an action creator from returning an action before the data is fetched.
 In my React-Redux project, I used thunk. In programming, “thunk” is a “piece of code that does some delayed work. For Redux specifically, they are a pattern of writing functions with logic inside that can interact with a Redux store's dispatch() and getState() methods. This allows for delayed actions, like working with promises. If you would like to read more about thunk, you can do so here. If you would like to read more about async logic and fetching data, you can do so here.
Import thunk to root file after running: npm install redux-thunk

The following data flow from the Redux documentation REALLY helped me understand how the data flows in a React-Redux app.




Thanks for stopping by 🙃️, BYE!
NEXT PAGE     HOME     INDEX