SIGN IN

React Lessons. Lesson 7.

Stay Informed

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

Stay Informed

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

logo_og
Hey all! This lesson today will be quite important to us. We’ve come closely to Redux, but first let us look through our home task. Though it was pretty simple, but let me show you how to add our calendar.

Install our module:

npm install react-day-picker —s

Make sure there is a record on this event in our package.json:

Import this Day-picker in ArticleList:

Change “state” in the following way:

In the “div” add a new module to our “select”:

Describe the component’s logics below:

Now we’ve got a functioning calendar. And every time you choose a period, it displays the date by our header “Article list.”

Note that our component ArticleList is permanently expanding, and it is not good. We’ve got great coding volume, and it is the first signal to make our “select” and “day-picker” together with their logics as individual components – within “Filters”, for example. The problem is that if we do it right now, we’ll have a lot of problems with the value transmission. We would like our components to be atomic and executing certain specific tasks. We can tell our component has become mature, and not it’s high time for us to think about business logics by adding Redux or Flux.

Let us remember how React works with its Virtual DOM. The MVC approach can hardly be included in its vision; moreover, in big apps you will have certain difficulties in understanding how this or that component works as you need to keep a lot of information in mind (concerning the way your app works). Just remember the two-way data binding and other Angular and Ember aspects. Instead of these challenges, the React team offered another solution on logics building – Unidirectional Data Flow. So, let us see Redux working principles

react-redux-introduction-33-638

We’ve got Store – these elements are responsible for data storage, and that is a place from where View reads and displays data.

“Actions” are events, or objects describing the things that will happen. They are created to describe communications with User (a mouse click, pushing a button, etc.) or API.

Dispatcher-Actions get to the dispatcher; the latter divides them and sends to the Stores, while these objects react and handle the Actions. For example, we’ve received the action “deleteArticle”; the Store understands it needs to go and delete some article. It notifies the View about this change; View requests all the data needed to re-build the UI.

And some words on how Flux differs from Redux:

  1. Redux is more focused on the concepts of functional programming, and all the Unidirectional Data Flow elements dramatically differ from each other. Let’s say, Store is an Immutable object responsible only for saving the state.
  2. They denied the external Dispatcher in Redux that was binding just everything. Also we’ve got one store for all, while a dispatcher is hidden inside – to work with it, developers are offered an API.

Since we’ve got one store, we’ve got one subscription method, too. Flux is very flexible and has a lot of “store”, which would cause a lot of troubles in development.

  1. Action-creators in Redux are just pure functions that return an object back to you, together with some data and the action.

Dispatcher is absent here.

  1. Stores => Reducers, it is a transmission mechanism between the states. Reducers are also pure functions. It is a function that knows the initial state and by getting some action should move to another state. They do not change the old one, but return a new one:

But before doing something complicated, let us create a simple Counter with Redux. Let us display a number on the page and increase its value when a button gets pushed.

Go to app.js, comment your ArticleList out and create a component Counter in the components folder:

Make it also possible to increment by a click. Next come back to app.js and import the component:

And also add:

Now install Redux in console:

npm i redux –S

Now we will store “count” in the “store” instead of transmitting it manually.

Create Store for this purpose. Create the same-named directory in src. Right there create an index.js file. First, let us navigate Redux supporting materials.

Before moving further to the “store” read a chapter “createStore.” All your data will live inside it. It is created using the function:

createStore(reducer, [preloadedState], [enhancer])

with one obligatory argument – reducer.

Now let us create our Store:

And that is a place where we will transmit our “reducer,” which will be created individually. Create a reducer folder in src and a respective index.js file inside. As we’ve already mentioned, “reducer” is an ordinary function, which gets the current state and action, while returning a new state. Let us add “window,” too, in order to monitor the current state.

Write in our reducer:

Don’t forget to “import” in app.js

Check out the supporting materials, in particular the “store” methods. We are interested in the three of them:

We need to explicitly set up the state upon creation. Note that we’ve already done it by setting up the state equal to 0.

In order to change anything in Store, we need to request “action creator” using the second dispatch method. Try it in a browser console:

store.dispatch({type: ‘INCREMENT’})

Now the state will change by 1.

Next let us work with displaying. Add storeGetState to app.js. We also want to get subscribed to the store changes and transmit them to the Counter. So, let us learn another method:

Now every time you update the Store, our number will get updated automatically, too.

Our link can now be connected with Action Creator.

Let us create a file “constants” in src, where we will store a vocabulary with available types of “actions”:

Get “reducer” added with some other parameters and apply some changes:

Create an AC directory and a file counter.js in it:

Create “import” in app.js, as well as “dispatch” and transmit it to our “counter” as props:

counter.js will change the following way:

count: PropTypes.number, increment: PropTypes.func

this.props.increment()

That’s how we’ve finished our simple work with data. By clicking a link we cause a method, which has been received via props. This method causes store.dispatch and wraps our simple action creator by it. The latter simply creates this object, which gets described by our “action” (in counter.js –  type: INCREMENT). Next our Store causes its own “reducer” by delivering the current state and action. This “reducer” will return a new state; “store” will write down this new state in its data and cause “callback,” which we’ve transmitted to store.subscribe. This “callback” will cause the render method again and will rebuild our component. Thus, we will see a number 1 point greater. So, that is how a simple Redux cycle built from a zero looks like.

The lesson code can be found here.

Снимок

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

About the author

Stay Informed

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

Stay Informed

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

Related articles

20.09.2019

Python range() Explained and Visualized

In this article, we’ll explore the functionality of range() and highlight its use cases — and you’ll know how to use range() in Python>>>

Programming

Understanding Flutter Bloc Pattern

In this article, we'll cover a bit of Reactive Programming, BLOC patterns in Flutter, when and how to use them, as well as look at some alternatives>>>

Programming
17.09.2019

“Learn Python the Hard Way”: a Detailed Book Review

In this article, we'll review a popular book titled "Learn Python the Hard Way" and analyze both its strong and weak sides.>>>

Programming

No comments yet

Sign in

Forgot password?

Do not have account yet? You can create one

Or use a social network account

 

By clicking Sign Up, you agree to our privacy policy

Sign up

Already have an account? Please

Or use a social network account

 

By clicking Sign Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By clicking Sign Up, you agree to our privacy policy