SIGN IN

React Lessons. Lesson 13. Part 1.

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter correct name
Please enter correct email
Looks good!

react_13_1

Our topic for today deals with asynchronous actions. We will start to take our articles from API. As you have already noticed, we have a simple API working. And in order to launch it, you need to open the folder simple_api and execute the following command there:

npm install

it will cause creating of it’s own node models folder there. Right after this the script that initiates a number of simultaneous processes will be activated. It can be seen in package.json within the root directory:

In our case, it simultaneously launches both npm run dev and npm run api. One of them  lifts an API, while the other launches webpack dev server. Since that moment a simple API has been working at our port 3001 :

http://localhost:3001/api/article

and at the port:

http://localhost:8080 – developer’s server.

It is quite common in real life, when a different team develops an API and you may rarely meet them. API can be stored in different places: locally or remotely – it doesn’t matter. There is your API in some places, while your dev server locally works in other places. Look at webpack.config.js:

In webpack devServer you need to set up redirection in order to avoid any сrossdomain requests. Everything that goes to /api will be proxied to your API. It is now localhost:3001, but later it can be some remote address. You set up redirection and will have an access to article from both addresses:

http://localhost:3001/api/article

http://localhost:8080/api/article

Thus, everything that goes to localhost:8080 will be directed to your page, while everything coming at /api will be redirected to your API.

We want to get all our articles not from fixtures.js, but from API as in our real life. So, let us make it happen. At the moment we’ve got all articles without text or comments being returned by api\article\ as it is senseless to get all data at a time, since the volume can be giant. Moreover, we will have to get the comments through an additional request once we will need them.

First, let us get a list of articles from API and get them displayed at our traditional address:

http://localhost:8080

To do so, let us first install JQuery.  We will install it just for AJAX requests, so type in console:

npm i jquery --s

We need to do a request for api\article\. The requests will be done in middleware for they are considered as Side Effect.

Create a file /middlewares/api.js.

We need to tell at the very beginning that we will divide our actions into  STARTSUCCESSFAIL. Go to constants.js and add the following record:

We take action LOAD_ALL_ARTICLES and then add our constants to it depending on whether we receive a request. Let us get back to /middlewares/api.js and do import of the JQuery library and our constants:

By analogy with randomID.js, where we checked a flag withRandomId, we will work with API. We will create  action creator and name it  LOAD_ALL_ARTICLES in  AC/articles.js:

We will return the same flat object. And it will have a flag callAPI (key) and a value in a form of /api/article. Now, in middleware, we will check if action  has  callAPI. If it does, this is the one we need, but if it doesn’t, we will skip it and move further.

Let us continue writing logics in /middlewares/api.js:

As far as you can see from the coding above, if we do not get a flag in a form of callAPI, we just deliver the control further. If it does exist, we will do a GET request to JQuery. Before making a request, we will deliver the control further by telling that we start the download. In .done, when we receive a respond, we will take it and deliver the control further. Our type will look like type + SUCCESS. We will also pass params  response and all other here. Since our action can go through a number of middlewares, for example – randomID, and then through callAPI. We will do the same thing with .fail, too. As a result, our action will be divided into two actions.

to-be-continued-13

We are looking forward to meeting you on our website soshace.com

 

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter correct name
Please enter correct email
Looks good!

Related articles

The Path of the Self-Taught Programmer: Avoiding Common Problems

In this article, we’ll explore how a self-taught programmer comes to be: which education opportunities they can utilize, which problems they may>>>

Programming

Introduction to GitHub Desktop: A GUI Enhancement to a CLI Approach

In this article, we'll explore various use cases of GitHub Desktop -- GUI software designed to ehance your git workflow. Does it hold up against CLI>>>

Programming
29.10.2019

Python Array Explained and Visualized

In this tutorial, we’ll delve into how Python arrays work, what their limitations are, and how you can use them to maximize their>>>

Programming

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy