Redux base and why we don’t use Lifting State Up for storage

Tram Ho

Introduce

We are in the series to learn about reactjs, I will try to give a lot of examples for you to understand. And maybe next time I will try to write a series of react bases for you to follow. Now let’s continue the lesson Let’s learn about lifting state up in reactjs, let’s learn about redux. Just like the opening statement and you probably also asked why the house now uses redux instead of lifting state up, ukm, because of the great advantages that it brings, I will not reveal it yet. We will learn together in this article 😃 . One small note is that if you want to understand the flow of operations and to better understand the issues, you should read about lifting state up first.

content

1. Definition

According to the redux document, it is simply defined as follows

Redux is a predictable state container for JavaScript apps.

If lifting state up works in a way that takes all of the same father to handle, then where needed, then transmitted from the father to. Or you can understand the following:

And as at the end of the previous section we share, then if the endpoints need data. It is imperative that we transfer data from the father and through the intermediate points . For example, if I want to transfer data from the father app.js file to menuItem, then I will need to pass it to the menuList mediator. And if you have 10 intermediaries, you have to pass it on 😃 , hearing alone will make you feel tired.

And redux appears as a great solution.

As shown in the picture, we can see, now that any of your components has changed, or the state is displayed, you can just connet directly to the redux store without any need for any guy.

2. Operation principle of Redux

If you have understood the thought of redux then this part will be how redux works, if you are very basic of these 2 parts I think you will quickly catch redux only 😄 .

Principle 1: Store (Single Source of Truth)

The status of the entire application is stored in a single store is 1 Object, you will have the following code:

The above code you can translate into: In the index file or can understand that Root component creates a store, and specify this store using myReducer , in the file import myReducer from ‘./reducers/index’; we will break down the processing files and combineReducers() – a collection of reducer reprocessing.

Principle 2: Action (State is Read-Only)

You will not be able to directly change the state as written in the component is setState () as before. To change the state on the store you need to send it an action (an object describing what happened).

The most important action is type. Because when you call a dispatch to send it to the store

and reducers can rely on this type to identify what you are trying to handle

Principle 3: Reducer (Changes are made with Pure Functions)

To specify the state of a tree changed by an action you must write pure reducers . Pure reducers simply understand that it takes an action and with the old state we will update a new state, in which you do not handle the web or call api etc … here only perform the state update function.

You can turn off the basic operations of redux according to the following image:

3. Apply redux to the example

And the sleepy theory program is over here, let’s go into some small examples to understand more deeply and to be able to absorb the thought of redux.

Install the redux library into the project

First, open cmd and pase the following command, to add redux to your project:

npm install –save redux react-redux

open the package.json file in the project if you find “react-redux”: in “dependencies” then you have successfully installed redux.

Use redux

There will be a lot of ways for you to divide your project folder with react and redux but the most general you will need: Store, Views, Actions, and Reducers.

  • Store : At the Root component initiates the store and wraps the components with the react-redux Provider so that the component can communicate with redux.

If you try to log up the store you will see a list of the default variables that are most important that you can see:

getState (): Help get the current state

dispatch (action): Make a call to action

subscrible (listener): Always listen for any changes and immediately update to the View

  • Actions : It is a pure object that defines two properties as type: type of action, for example taskConstants.FETCH_TASK_SUCCESS , payload : data that the action passes.

taskConstants is just a place for my static variables to be written, so I wrote them to avoid confusion and change easily when needed. 😄 So you don’t need to be so concerned.

  • Reducers : As I mentioned above, the code will take actions and accordingly we will update your state.

  • View : Displays data provided by Store. We will use import {connect} from ‘react-redux’; to connect to redux. I will take one of my components to explain to you

First we will connect to redux via connect , then we will implement middleware with propTypes to check the data received. And finally, I wrote the showProducts function to render this received data.

In summary:

component -> action -> reducer -> store -> component

Conclude

By reading this, you probably have an idea of ​​what redux is. Thank you for reading my post, if you have any questions, or if you have any part that you do not understand, you can comment below the comment section so that we can learn better. And especially do not forget to give me a like and a share 😄 !!!

Share the news now

Source : Viblo