Writing in the front

This blog post is about some notes I took while studying Redux, Redux, not React-Redux. In your Reac project, you should weigh which of the two to use, which provides convenience but requires mastery of additional apis and compliance with its component separation specifications. I personally prefer to use Redux, so the following notes are all about Redux.

In this blog post, I will introduce you to how to use Redux in the React project from scratch.

What is the story

For starters, if you want to learn Redux, chances are you’ve been learning React.js for a while and want to use Redux in React projects. So you might get the idea that Redux is an appendage of React, or that Redux is included in React.

Redux and React have nothing to do with each other. They’re just two frameworks. React will still be alive and well without Redux, but with Redux, the React project will be much better.

For example, React is like a library, and Redux is like the librarian in the library. Without the librarian, the library can still work normally. You can find, borrow and return books from the library. However, it may take a lot of time in the process of looking for a book. When borrowing or returning a book, you need to record it in the library book by yourself, which is very inconvenient and error-prone.

But with the help of the librarian, when you go to the library to find a book, you can ask the librarian where the book is, and then you can easily find the book. When borrowing and returning books, we just need to hand in the books to the librarian, then show our library card and let the librarian help us complete the registration. So for us, both convenient and accurate, happy to enjoy the service brought by the administrator.

With this example in mind, I’ll introduce Redux to an actual React project.

React is a view-level framework. In a React based project, its main purpose is to design concise views for each state of your application, effectively update and render components correctly when data changes. React, however, is bad at managing data, especially where data comes from between components. For example, components in a project are structured as follows:

If component 4 wants to communicate with component 10 at this point, you need to pass data from component 10 to component 9, which then passes data to component 7, component 1, component 2, component 3, and finally component 4. You can imagine the amount of code and work. That’s not the worst part. The worst part is that if something goes wrong with the data you pass, you don’t know which component is responsible and you have to debug it one by one.

In this case, we need a solution that manages the data uniformly, brings in the required data directly into the components, and modifies the data in a uniform way. That’s where the Redux comes in. If we use Redux to manage data in our projects, you’ll see what clarity and simplicity mean.

Now that you have a good idea of Redux, let’s start with how to use it.

The installation of the story

Redux is a data layer framework. To use Redux, you need to install it in your project as follows:

npm install --save redux
Copy the code

With the installation complete, we can begin our journey with Redux.