SIGN IN

React Lessons. Lesson 11. Pt.2.

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-lesson-11

The simplest example of side-effects is Logging. Next we will create middleware that deals with Logging.
Create a folder middlewares  with a file logger.js inside:

middlewareis a function that receivesstore, returns the function that receives next (the function for further control delivery), which, in its turn, returns the function accepting action that does something. This scheme enables you to have an access to the current value of your store , to next and action . Our store will show immutable.js structures. (it is happening with help of our recordsFromArray from reducer/utils.js). And what is more important is that  state of our  store can change throughout the lifecycle of this middleware. We will see it right here, in our logger. First, we will do dispatch  of the “before” state and then we’ll call next – the delivery of control further. Generally, the whole chain of middlewares exists, and it goes from one to another, which means we’ve handled our action in this middleware and then we deliver management using next  to the next one, and whenever  middlewares are over, it gets to reducers for being handled there and go to store.  Once we are done with dispatch of this action , we return to our middleware and can get the current state of store after it has been handled in reducers.

Now we need to connect our middleware to store. We enter store/index.js and change it in the following way:

For that purpose store has the third argument enhancer.  First, let us connect our  middleware, also we will need the function applyMiddleware from  redux  that can collect all middlewares we need. Right now we connect only logger.

Now every action will be accompanied with Logging. Look at the work results of our logger within console in a browser by deleting one of the articles, for example.

Of course, middlewares are created by third-party developers, too, and you get connect them, but we’ll talk about it later. Except for  middlewares  there exist  enhancers that can be connected without using middleware. A perfect example is redux devtools. It enables you to see what actions you’ve got, cancel an action, restore it or see what  state your store has got at the moment. It is recommended to install it as a Chrome extension. You can find info on how to connect it to you store in the technical materials. If you want to connect several  middlewares , you need to use the compose function inside redux . A connection example has already been given by us in store/index.js. Our redux devtools will get started upon the app reloading.

As middlewares get all called for every action and very often we do not need them all, we should be mindful and avoid creating them in great numbers, as well as check out whether we need this or that middleware. It is also quite important to remember about the order; they are delivered by a chain from the first one to the last one, that’s why logger needs to be put in the very end, while technical middlewares – for example, random id generation – should be added in the beginning.

So, how should we organize middlewares? The execution order will be exactly the same as you publish them. As an example, let us add one more middleware that will just deliver the management further; moreover, together with the action it delivers ‘hello world’ or can deliver a random id (it may be useful for your home task). Upon the full impot to store/index.js  let us immediately add:

Also, it will be the first one within applyMiddleware followed by logger  and  redux  devtools.

Home Task: Create the functional of adding a comment to an article, i.e. the place where comments are added below every article, should also contain a form with a button that will enable to add a comment to the article. You do not need to store it anywhere else, except for your store.

The lesson code is available in our repository.

react_11_finish

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