What is the difference between redux and react

The differences between redux and react are: 1. redux is a JavaScript state container, while react is a JavaScript library launched by Facebook to build user interfaces; 2. redux mainly provides state management, while react mainly uses For building UI and so on.

The operating environment of this tutorial: windows7 system, React17 version, DELL G3 computer. This method is suitable for all brands of computers.

Recommendation: "JavaScript Basic Tutorial"

Difference

redux

redux is a JavaScript state container that mainly provides state management. Can run on server, client, and native applications. In addition to supporting React, it also supports other UI frameworks and is small in size, only 2kb. When using it with React, you can use the react-redux plug-in to further improve our development experience.

You can change the data in this container by calling the corresponding API or using the corresponding mechanism. Other components can re-render by actively re-obtaining new data from the container.

In addition, this container also needs to support the publish and subscribe mechanism, that is, when a certain data changes, the components that care about the data will be notified immediately.

react

react is a JavaScript library launched by Facebook for building user interfaces. React is mainly used to build UI. Many people think of React as the V (view) in MVC. React has high performance and very simple code logic. More and more people have begun to pay attention to and use it.

React is an open source JavaScript library that provides views of data rendered into HTML. React views are typically rendered using components that contain other components specified in custom HTML tags. React provides programmers with a model in which child components cannot directly affect outer components, efficient updates to HTML documents when data changes, and clean separation between components in modern single-page applications.

Learn to use your own thoughts to understand React and Redux; you can't just listen to other people describing the nouns, it is very difficult to understand.

Start from the needs and see what is needed to use React:

1. React has props and state: props means properties distributed by the parent, and state means The internal state of the component can be managed by itself, and React as a whole does not have the ability to trace data upwards, which means that data can only be distributed downwards in one direction, or digested internally by itself.

Understanding this is the prerequisite for understanding React and Redux.

2. The generally built React component may have a complete application inside, which works well by itself, and you can control it through properties as an API. But more often it is found that React cannot allow two components to communicate with each other and use each other's data.

The only solution at this time without communicating through DOM (that is, within the React system) is to improve the state, put the state into a shared parent component for management, and then distribute it back to the child component as props.

3. The only way for a child component to change the state of the parent component is to trigger the callback declared by the parent component through onClick. That is, the parent component declares a function or method in advance as a contract to describe how its state will change. Pass it to the child component as an attribute as well.

A pattern emerges: data is always distributed one-way from the top to the bottom, but only subcomponent callbacks can conceptually return to the top state to affect data. This way the state is responsive to a certain extent.

4. In order to face all possible expansion problems, the easiest way to think of is to put all states on the top level of all components and then distribute them to all components.

5. In order to have better state management, a library is needed to distribute it to all React applications as a more professional top-level state. This is Redux. Let's come back and look at the requirements for reproducing the above structure:

Needs a callback notification state (equivalent to the callback parameter) -> action

Needs to be processed according to the callback (equivalent to the parent method) -> reducer

requires state (equal to the total state) -> store

There are only these three elements for Redux:

action is purely declarative The data structure only provides all elements of the event and does not provide logic.

Reducer is a matching function, and the sending of action is global: all reducers can capture and match whether it is relevant to itself or not. If it is relevant, the elements in the action will be taken away for logical processing, and the elements in the store will be modified. If the state is not relevant, the state will not be processed and returned as is.

Store is responsible for storing state and can be called back by react api and publish actions.

Of course, the two libraries are generally not used directly. There is also a binding called react-redux, which provides a Provider and connect. Many people actually understand that redux is stuck here.

Provider is a common component that can be used as the distribution point of the top-level app. It only requires the store attribute. It will distribute state to all connected components, no matter where they are or how many levels they are nested.

Connect is the real point. It is a curated function, which means it first accepts two parameters (data binding mapStateToProps and event binding mapDispatchToProps), and then accepts one parameter (the component to be bound itself) ):

mapStateToProps: When the Redux system is built, it will be automatically initialized, but your React component does not know its existence, so you need to sort out the Redux state you need, so you need to bind a function, Its parameter is state, which simply returns a few values you care about.

mapDispatchToProps: The declared action serves as a callback and can also be injected into the component. This is through this function. Its parameter is dispatch. All actions and parameter dispatch are bound through the redux auxiliary method bindActionCreator. It can be simply used as an attribute in a component as a function, without manual dispatch. This mapDispatchToProps is optional. If you do not pass this parameter, redux will simply inject dispatch as an attribute into the component, which can be used manually as store.dispatch.

This is also the reason why it needs to be cured.

After completing the above process, Redux and React will be ready to work.

Simply put:

1. Top-level distribution state, allowing React components to render passively.

2. Listen for events, and events have the right to return to the top level of all states to affect the state.

Summary:

React needs a manager to manage the state. Redux acts as this role to distribute the top-level state and change the rendering of react components.

The above is the detailed content of What is the difference between redux and react. For more information, please follow other related articles on the PHP Chinese website!