Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to understand Redux". In daily operation, I believe many people have doubts about how to understand Redux. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to understand Redux"! Next, please follow the editor to study!

What is Redux?

At an ultra-high level, Redux is a tool that developers use to simplify their work. As many of you may have heard, its job is state management. I'll explain the meaning of state management later. At this point, I can only show you the following picture:

Why should I know Redux?

Redux is more about the internal work of the application than about how it looks and feels. This is a somewhat complex tool, and the learning curve is relatively steep, but does it mean that we as designers should stay away from it?

No, no. I think we should embrace it. Car designers should know the use of engines, right? In order to successfully design the application interface, the designer should also have a solid understanding of the underlying things. We should understand what it can do, understand why developers use it, and understand its advantages and implications.

What can Redux do?

Developers use Redux to manage state in React applications. The most common usage, Redux, improves on aspects that React (not yet) does not do well.

However, you will soon find that the real function of Redux is much more than that, so let's start by understanding the true meaning of state management.

State management

If you're not sure what this state means, let's replace it with a more general term: data. State is constantly changing data, and it determines what is displayed in the user interface.

What does state management mean? Generally speaking, we need to manage three aspects of data in the application.

Get and store data

Bind data to UI elements

Change the data

For example, we are going to make a Dribbble work page. What kind of data do we want to display on the assignment page? These include the author's profile photo, name, dynamic GIF picture, number of likes, comments, and so on.

First, we need to get all this data from the cloud server and put it in a location. Next, we need to actually display the data. We need to assign this data to the corresponding UI elements, which represent what we actually see in the browser. For example, we assign the URL of the avatar to the src attribute of the img tag:

We need to deal with changes to the data. For example, if users add comments or likes to Dribbble shot, we need to update the corresponding HTML.

These three aspects of coordination state are important components of front-end development, and React supports this task to varying degrees. Sometimes the built-in features in React work well enough. But as the application becomes more complex, it may become more difficult to manage its state with React alone. This is why many people start to use Redux as an alternative.

Get and store data

In React, we decompose the UI into components. These components can be broken down into smaller components.

Picture description

If our UI is constructed this way, when do we get the data and where to store it before we populate the UI?

Suppose there is a cook in each component. Getting data from the server is like purchasing all the raw materials needed to prepare delicacies.

A simple way is to get and store data where and when you need it. It's like every chef buys vegetables and meat directly from distant farms.

Simple way: each component gets the data it needs

This method is very wasteful. Even for the same data, we need to request the server multiple times from multiple components. Cooks waste a lot of gas and time running back and forth.

With Redux, we take the data only once and store it in a central location called store. Then, any component can use this data at any time. It's like a supermarket nearby, where our chefs can buy all the ingredients. The supermarket sent trucks to bring back vegetables and meat from the farm. This is much more efficient than letting individual chefs go to the farm in person.

Store is still the only data source. Components typically get data from store rather than anywhere else. This keeps UI highly unified.

Redux stores data centrally and assigns data to UI elements

Bind data to UI elements

If you use React alone, there is actually a better way to get and store data. We can ask our very kind chef Shotwell to shop for all his chef friends. He will drive a truck to the farm and transport the goods back. We can take data from container components, such as the Shot component in the Dribbble example, and use it as a single data source.

This approach is more effective than a simple way to get data from each component. But how does Shotwell pass the ingredients to other chefs? How do I pass the data to the components that actually render the HTML element? We pass the data from the external component to the internal component, like a baton, until the data reaches its destination.

For example, the URL of the author's avatar needs to be passed from Shot to ShotDetail, Title, and to

Label. If our chef lives in an apartment, it looks like this:

To deliver the data to the destination, we must use all the components on the path, even if they don't need the data at all. If there are many layers, it will be very annoying.

What if the supermarket can deliver goods to your door? With Redux, we can insert any data into any component without affecting other components, like this

More precisely, it is another library called react-redux that provides the data to the component, not the Redux itself. But because react-redux itself is just a connection library, and developers usually use Redux and react-redux together, I think there's nothing wrong with taking it as one of the benefits of Redux.

Use Redux to extract data directly to the target component

Note: in the version of React (16.3), there is a new context API that extracts data almost the same as Redux. So if your team uses Redux to extract data, seriously consider upgrading to React 16.3!

Change the data

Sometimes, the logic of updating data in an application can be quite complex. It may involve multiple interdependent steps. You may need to wait for a response from multiple servers before updating the application status. We may need to update the status of multiple state at different times and under different conditions.

If we don't have a good structure that fits all the logic, it's easy to be overwhelmed and the code is hard to understand and maintain.

Redux told us to divide and rule. It provides a standard way to break down the data update logic into small "reducer". These reducer work together harmoniously to accomplish complex actions.

The true power of Redux

So far, Redux seems to be just an auxiliary tool for React. Developers use it to address some of the pain points of React. But React is working quickly to solve these problems! In fact, Dan Abramov, the author of Redux, joined Facebook's React core team a few years ago. They have been working to improve the development experience of React: context API (version 16.3), better data acquisition API (see Dan Abramov's February 2018 presentation), better setState API, and so on.

Will it make Redux obsolete?

You know what? I haven't shown you the true power of Redux yet!

Redux forces developers to follow some strict rules, which brings powerful functionality to Redux.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

All data (application state) must be described in clear text. You should be able to write down all the data on paper with a pen.

Each action (a change in data) must be described in clear text. You must write down what you have to do and then make changes. You can't change the data without leaving a trace. In Redux terminology, this is called a "dispatching action".

The code to change the data must be like a mathematical formula. It must return the same result in the case of the same input. No matter how many times you run, the square of 4 is always 16.

When you follow the above principles to develop applications, the incredible thing comes. Redux will open up a lot of cool features that are difficult to implement or expensive to implement using other technologies. Here are some examples.

I learned from the Dan Abramov articles "You Might Not Need Redux" and "React Beginner Question Thread." Some examples are collected in.

Undo, redo

The popular undo / redo function requires system-level planning. Because undo / redo requires recording and playing back every data change in the application, you have to consider this in the architecture from the beginning. If you think of it in hindsight, you will need to modify a lot of files, which is the root cause of countless errors.

Because Redux requires each action to be described in text, it can be said that undo / redo is inherently supported. This document describes how to use Redux to implement undo / redo.

Collaborative environment

If you want to build Google Docs-like applications where multiple users work together on complex tasks, consider using Redux. It can do a lot of heavy work for you.

Redux can very easily send what is happening over the network. It is simple to receive actions performed by another user on another machine, replay changes and merge with actions that occur locally.

OPTIMISTIC UI

Optimistic UI is a concept put forward by Meteor that the front-end interface responds to user interaction quickly, formerly called Latency Compensation. Its main function is to respond directly to user interaction at the client, instead of waiting for information to be sent from the client to the server to complete the update confirmation, and then return to the client from the server to complete the response. It is somewhat similar to Dead Reckoning in the game field, which speculates user behavior offline on the client side, in order to hide latency and reduce bandwidth usage.

To take a simple example, in a Twitter application, your like needs to be checked by the server, for example, whether the tweet still exists. Instead of traditionally waiting in circles for a few seconds and then displaying the results, Optimistic UI chooses to deceive the user! It assumes in advance that all requests are successful and directly + 1 when the user likes it.

The reason this works is that requests are normal most of the time. When the request fails, the application simply rolls back to the previous UI state and uses the actual result of the server response, such as displaying an error message.

Redux supports Optimistic UI as well as undo / redo. When negative results are received from the server, you can easily record, replay, and restore data changes.

Persistence and startup from state

Redux can easily save what happens in an application to local storage. After that, even if the computer restarts, the application can load all the data and continue to run from exactly the same location as if it had never been interrupted.

If you build your game using Redux, you only need a few lines of code to save / load the game's progress without changing the rest of the code.

A truly scalable system

With Redux, you must "dispatch" an action to update any data in the application. This limitation gives us an in-depth understanding of all aspects of the application.

You can build truly scalable applications where each function can be customized by the user. For example, refer to Hyper, a terminal application developed using Redux. The "hyperpower" plug-in increases the flash point of the cursor and makes the window jitter. Do you like this "wow" mode? (maybe this function is useless, but it is eye-catching enough.)

Picture description

Timing debugging (TIME-TRAVEL DEBUGGING)

What is the experience of being able to travel in time when debugging an application? While running the application, go backwards or forward several times at will to find the exact location where the bug occurred, repair the bug and replay it to confirm whether it has been repaired.

Redux makes developers' dreams come true. The Redux developer tool allows developers to manipulate the progress of the application by dragging the slider, just like Youtube videos.

How does it work? Remember the three strict rules enforced by Redux? That's its secret.

Picture description

Automatic error reporting

Imagine this: a user finds some errors in your application and wants to report this bug. She took great pains to recall and describe what she had done. The developer then tries to perform these steps manually to see if the error occurs again. Error reports may be vague or inaccurate. It is difficult for developers to find the location of bug.

Now, how about this. The user clicks the report error button. The system automatically sends what she does to the developer. The developer clicks the Replay error button and observes how the error occurs. Bug was squashed on the spot, everyone was very happy!

That's how Redux Bug Reporter plays. How does it work? The limitations of Redux make everything possible.

Shortcomings of Redux

The three main rules enforced by Redux are a double-edged sword. They support powerful functions, but they also bring inevitable disadvantages.

A steep learning curve

Redux's learning curve is steep. It takes time to understand, remember and get used to its patterns. If you don't know Redux and React at all, it is not recommended that you study both.

"template" code

In many cases, using Redux means writing more code. It usually requires access to multiple files to make a simple function work. People have been complaining about the boilerplate code they have to write in Redux.

I know. It sounds contradictory. Didn't I say that Redux can implement functions with the least amount of code? It's kind of like using a dishwasher. First of all, you have to spend time arranging the dishes carefully. Before that, you will see the benefits of the dishwasher: saving time actually cleaning the dishes, disinfecting the dishes, etc. You must decide whether the preparation time is worth it!

Performance loss

Due to its enforcement limitations, Redux may also have an impact on performance. Whenever the data changes, it adds a little bit of overhead. In most cases, this is not a big problem, and the slowdown is not obvious. Still, when there is a large amount of data in storage and when the data changes frequently (for example, when users type quickly on a mobile device), UI may become slow as a result.

Redux is not just made for React.

A common misconception is that Redux is used only for React. It sounds like Redux can't do anything without React. In fact, as we discussed earlier, Redux complements React in several important ways. React is the most common Redux use case.

In fact, however, Redux can use any front-end framework, such as Angular, Ember.js, or even jQuery, or plain JavaScript. Try to Google it, and you will find this, this, and even this. Redux's general idea can be applied anywhere.

As long as you use Redux wisely, you can benefit from it in many cases, not just in React applications.

At this point, the study of "how to understand Redux" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.