A brief analysis of the characteristics and relationship between react and Redux

Time:2021-12-9

React + Redux is very refined, and good use will give play to extremely strong productivity. But the biggest challenge comes from the functional programming (FP) paradigm. In the process of engineering, architecture (top-level) design will be a huge challenge. Otherwise, the things you make may be a mess. In the final analysis, the traditional framework and react + Redux are the duel between OO and FP programming paradigms.

Simply learning a technology can not build a global understanding, and it is difficult to engineer. Therefore, we must look at the following aspects:

  1. Understand its unique things. For example, the component in react is the pure render function.

  2. Put the new technology in context. Put react in flux and redux. To really see the one-way flow of data.

  3. Compare and see the advantages. Compare with other solutions (Vue, angluar, Adobe Flex) to see their advantages.

  4. Challenge. There is no silver bullet in the software field. There are benefits and challenges.

1. Talk about your understanding of react

1.1 unique characteristics

  • Virtual DOM: another virtual layer, middle layer and cache layer, boldly jumping out of the DOM implementation constraints of the web and realizing a more ideal UI programming model: tree control organization, unified events and unified data transmission channels (props). DOM can be rendered to the web and navitive GUI system, which is very wonderful. Learn once, use everywhere.

  • Light component: the component of react emphasizes pure render and puts business logic into other subsystems, such as reducer in redux.

  • To minimize the component state, pressOfficial statement, which is not passed in by props and changes with time, and cannot be calculated by other props and stat.

  • Common design patterns: create multiple stateless components that are only responsible for rendering data. On their, there are stateful components. Stateful components encapsulate the interaction logic of all users, while these stateless components are responsible for declaratively rendering data.

  • The design paradigm is data-driven components to render. Compared with OO paradigm, OO sometimes makes compoent into an autistic and complex class, which hides too many states and is difficult to track in debugging.

1.2 set react in context

React’s virtual DOM wants to build an ideal front-end model. What is the ideal front-end programming? My personal summary is as follows:

  1. Ability to build basic UI: whether it’s component drag and drop (VB) or writing tree XML description document, it can quickly make UI interface consistent with intuition

  2. Data binding: bind data with the data layer (model) to display a UI with data

  3. User interaction: the user clicks and touches, the program completes the business logic and feeds back to the user, indicating that it is a live UI

  4. UI layout: organize and manage one UI. One UI calls up another UI and dies or hides itself.

Ability to build basic UI: react completes very well. You can build a basic UI by writing JSX. JSX is a very good engineering method. It’s hard to be unhappy when you see it at first sight. But new things always take five minutes! Taste it, and you will find that it is more cohesive and pragmatic to cohere the calculation and display in one place. You can even write CSS styles in JS files in the form of inline sytle. The most important thing is that it can perfectly mix XML components with JS!

In data binding: react can beautifully complete the initial data binding through the props data communication protocol of parent-child components. This props is simple, efficient and bright!

User interaction: the react component is considered to be a finite state machine. Interact with users and change their state. According to these States, the render algorithm calculates the appropriate data set and presents it to the user. The advantage of this is that the design paradigm is highly consistent.

For UI layout, you may need to use react router or write your own framework. This one has not been studied.

1.3 comparison with other schemes

Compared with other schemes, react has the outstanding advantages of orthogonality, lightness, agreement and pragmatism:

  1. Orthogonality: compared with Vue, angular corrects the intersection. It has no template, and the large component is template.

  2. Light: compared with abobe flex or other UI systems, it is light without complex UI OO system, which also shows that react is only an adhesive layer of the target UI system.

  3. Conventionality: conventionality is greater than Java ritual, which is also in the trend since rails. For example, pure render minimizes stateless state.

  4. Pragmatic: use JSX to organize and express the tree structure of controls, and use this. Props to transfer data

1.4 challenges

React is a data-driven UI component system. It is an open data dependent, non autistic OO object. It will have the following challenges

  1. The render method may be very large, and the component display logic is implemented in render at one time. There are often two logical implementations, the first data binding and the algorithm after interacting with users.

  2. Render creates a reactelement tree, but some components and UI elements in the tree are moved forward due to calculation, which will make the tree look incomplete and less intuitive.

  3. Although it can be decomposed into small components, building large components may be a challenge, because all logic depends on external data, which is relatively unstable, and the components lose the protection of their own boundaries and are not self closing.

  4. When the interaction is complex, the state of the component will become larger and larger, and the render global algorithm will become more and more difficult to write.

  5. It is also a non explicit thing to pass the behavior of child components. It is often necessary to pass a function of the parent component to the child component as a callback.

  6. Large components often have multiple pages. How these pages exchange data is a great challenge

2. Talk about the understanding of Redux

2.1 uniqueness

  1. A data layer framework, similar to baobab. Better than that, the middleware system is introduced. There are several ready-made plug-ins, Redux thunk and Redux promise, which do not need to worry about asynchronous requests. Although flexibility and independence are very important, the overall design is also reassuring to use without worrying about function loss and other risks.

  2. The immutable data in FP is applied, which greatly improves the tracking data change process. That is, the time travel it preaches. This is good for locating complex problems.

  3. For tree data storage, the return of reducer is the process of creating, updating and deleting. The tree structure does not need to be defined in advance. At the same time, reducer is also a pure function, which echoes with reactor’s render.

  4. Strong constraints (conventions) increase internal aggregation. The action, dispatcher and store in flux are scattered, which is required in the hierarchical architecture, but the cohesion is poor, resulting in a sense of Java ritual. The data layer of Redux is very clear. When a store is updated, it will be dispatched to action. The first half will do whatever it wants, and the second half will be reducer. The reducer constraint is not to change the oldstate, return to newstatew, and achieve immutable.

  5. Different actions: actions in Redux will be cut very thin. A traditional action is cut into three actions: loading, getsuccess and GETERROR. Therefore, from this perspective, action serves the UI, not the business logic unit.

  6. Redux widely uses FP, and often encounters the concepts of curry, Trund and promise in FP, resulting in high learning cost. Implemented in the middleware layer, it is unfriendly to people without FP experience.

2.2 setting Redux in context

  1. Redux is a relatively thin data layer. At the same time, the view is refreshed synchronously (Redux react).

  2. In traditional MVC, there is still a controller to do business logic. However, Redux abruptly cuts a controller into two parts: action and reducer.

  3. Theoretically, Redux can also take the stat storage in the react component, such as the user search name. In this way, you can put the filtering algorithm into the selector. But the benefits are not great.

2.3 comparison with other schemes

  1. Compared with baobab, both are data management frameworks. Baobab provides cursor to facilitate you to update very deep data structures. Redux is done through the selector function, which will be more obscure. But better than baobab, data fetching can be done through Redux’s middleware.

  2. Compared with the controller and actionrecord of rails, Redux is more of a convention. It does not provide routing level controller or data access cursor.

  3. There are no more than 10 interfaces and very little code, but it is completely different from the previous MVC framework. Perhaps the biggest problem is that there is no connection with react route, which makes people confused in engineering. ​

2.4 challenges

  1. The biggest challenge of Redux application comes from the design level, how to design action and state tree structure. We can only do it through very few clues (FP architecture idea), which is a big challenge for teams without FP experience.

  2. It is rather obscure to get data from the stat tree through the selector function, and the code in the selector is considered as business logic. It is placed separately in the selector and is not cohesive in business.

  3. Middleware layer design: action is an intention, which is sent to middleware to realize this intention. However, in doing so, action has two meanings, one is an object and the other is a function. At the same time, FP programming is too intrusive.

  4. It is not designed in combination with route, which makes people very worried, and they don’t know how to connect data and components under different routes.

3. Summary

React + Redux is a typical implementation of FP programming paradigm, while other frameworks are mostly OO paradigm. Whether to use react + Redux for development depends on whether you have a grasp of FP or certain architecture ability. However, there is no such requirement when using react alone. It is used as a view.

3.1 FP vs OO

Advantages and disadvantages of FP
  1. The advantage of FP is that it does not have the complex ritual sense of OO. It is abstracted and structured along the idea of data structure + algorithm. If the top-level design is done well, the code reuse degree is very high and the amount of code is small. For example, to generate a tree, I use the iteration algorithm to generate it directly, while OO people often use a composite pattern to define an obscure class interface.

  2. The disadvantage of FP is also the disadvantage of process oriented programming. The algorithm and data are global and coupled with each other, which often leads to a strongly coupled system. If the top-level design is not done well, it is difficult to evolve.

  3. Some shortcomings of FP can be reduced through convention and global understanding. “Agreement is greater than configuration” is also the main development direction of the framework. ​

OO advantages and disadvantages
  1. The advantage of OO is divide and conquer and incremental evolution. At the same time, it has autistic and clear semantics.

  2. The disadvantage is that it is very difficult to express some algorithms. For example, it is troublesome to implement historical rollback in command mode. This is also the reason why most of the design patterns of the gang of four are difficult to understand. In addition, there has always been a problem of algorithm reuse in OO. Ruby language solves it better, and it is natural to use mixin. For example, using multiple inheritance and generics in C + + is not the best. ​

3.2 recommendations

  1. Those with FP experience or strong architecture ability, few team members and strong ability are suitable for react + redux. Otherwise, use react + angluar, or use Vue directly.

  2. Excessive OO and too much sense of Java ceremony are really unnecessary. Through architecture design, FP has certain advantages in productivity. At the same time, it can better adjust and locate the complex system. In the new era, it is worth trying.

Reprinted from:http://www.jianshu.com/p/0e42…

I have built a front-end learning group to learn the front-end together.Pure, pure technical discussion, non front-end personnel do not disturb!Join us on wechat:iamaixiaoxiao。

A brief analysis of the characteristics and relationship between react and Redux