Redux design ideas and usage scenarios

Time:2020-11-25

Welcome to my official account.Rui talk, get my latest article:
Redux design ideas and usage scenarios

1、 Preface

As an important member of react family bucket, Redux has been widely used under the support of many big bulls, and the star on GitHub has also reached 42K! However, when it comes to the most fundamental question, why Redux should be used, many people are not clear. This paper attempts to interpret the original intention of Redux, and talk about the actual use scenarios with react. This article only talks about the theory, will not make too much introduction to the use of redux.

2、 Redux design ideas

How to describe Redux in one sentence? The official website says:

Redux is a predictable state container for JavaScript apps.
Redux is a predictable state container designed for JavaScript applications.

It can be seen that the main role of Redux is to manage the program state. The State mentioned here refers to the data state, that is, the state of the model. Today’s popular front-end frameworks use MVVM design patterns, namely model, view, view model. The framework undertakes most of the work of view model. We just need to define the mapping relationship between model and view clearly. It’s a formulaView = Render(Model)。 So essentially, the page users see is a visual representation of the model in a certain state.

Redux design ideas and usage scenarios

Page switching can be simply understood as the state transition of model (and also involves the state change of UI). The state of data and UI are collectively called state.

So why do you need a dedicated tool to manage States? Let’s take a look at the following picture

Redux design ideas and usage scenarios

This is a data flow diagram of the backbone. A view may involve multiple models. When the user operates the view, it may cause the update of multiple models, and the update of the model will cause the change of another view. The relationship between view and model is complicated. If you want to add a function or modify a bug, you have to spend a lot of time debugging, and it is easy to have problems.

You may say that you won’t encounter this problem with react, because react naturally uses state to manage the display of the interface. State and view correspond one to one, which is consistent with Redux’s idea. However, as the application complexity increases, you will experience the following mental journey:

  • At the beginning, you only need to do some simple display, as long as the top-level components get the data and then pass it to the sub components in the form of props

Redux design ideas and usage scenarios

  • After the interaction function is added, the sibling components need to share the state. When component 1 is modified, component 2 also needs to be updated synchronously. The solution of react is lifting state up, which updates the state uniformly through the parent component, and then passes the new state through props

Redux design ideas and usage scenarios

  • With the development of functions, there are more and more components, and the state becomes more and more complex. Until one day, you find it extremely difficult to modify and share a state

Redux design ideas and usage scenarios

The shared state needs to be maintained at the top level, and then the method of modifying the state and the data presented are passed down layer by layer. At this time, you will find that many components of the data middle tier do not need to be used at all, but because the sub components need to be used, they have to be passed through these middle tier components. What’s more, when the state changes, you can’t tell which component triggered it.

  • At this time, if Redux is used to refactor the application, the change of state will become very clear

Redux design ideas and usage scenarios

The state of the application is maintained in the store. When the state needs to be modified, dispatch an action to the reducer. After the reducer calculates the new state, it publishes the state to the pre subscribed components.

All changes to the state need to dispatch an action. By tracking the action, we can get the change process of the state. The whole data stream is unidirectional, detectable and predictable. Of course, another additional benefit is that there is no need to deliver props layer by layer, because Redux has a built-in publish subscribe module.

Redux design ideas and usage scenarios

3、 Usage scenarios

Redux is good, but not for all projects. It’s very cumbersome to create redstate. Who knows who needs to use redstate

As Dan Abramov, the author of Redux, said, Redux provides a switching scheme, which requires applications to sacrifice some flexibility to meet the following three requirements:

  • The application state is described by simple objects and arrays
  • The change of application state is described by simple object
  • Pure functions are used to describe the logic of state change

Accordingly, you will get the following benefits:

  • It is very convenient to store the state in local storage and take it out and start the application when necessary
  • You can directly calculate the state on the server side, save it to HTML, and then open the page in the client
  • Convenient serialization of user operations and corresponding state snapshot, when a bug occurs, you can use this information to quickly reproduce the problem
  • By passing action objects in the network, distributed applications can be implemented with little code changes
  • The undo and restore functions can be implemented with very small changes to the code
  • In the development process, you can jump to a historical state of the application and operate at will
  • Provide comprehensive review and control functions, so that developers can customize their own development tools
  • Separate UI from business logic so that business logic can be reused in multiple places

In addition, for react, you may need Redux’s help when:

  • The same state needs to be shared among multiple components
  • You need to operate some global resident components, such as notifications and tooltips
  • Too many props need to be passed in the component tree, most of which are just to be passed through to sub components
  • Because the business is too complex, the component file is too large. You can consider splitting the business logic into a reducer

4、 Conclusion

Redux is a predictable state container designed for JavaScript applications. Before using it, it’s better to find out what it can bring to your program and what compromise you need to make, which is the exchange scheme mentioned above. I hope that after reading this article, you will have a more comprehensive understanding of Redux’s design ideas and usage scenarios.

Recommended Today

Summary of recent use of gin

Recently, a new project is developed by using gin. Some problems are encountered in the process. To sum up, as a note, I hope it can help you. Cross domain problems Middleware: func Cors() gin.HandlerFunc { return func(c *gin.Context) { //Here you can use * or the domain name you specify c.Header(“Access-Control-Allow-Origin”, “*”) //Allow header […]