Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what the role of react-redux is, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this react-redux. Let's take a look at it.

The function of "react-redux": 1, divide the component into container component and UI component; 2, replace the state change of the "store.subscribe" listening component in redux for rendering component; 3, cooperate with redux to make the component get the global state easily and facilitate the communication between components.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What's the use of react-redux?

React-redux is used with redux to inject the store data defined by redux into the component, which can easily get the global state of the component and facilitate the communication between components. Associate the react group price with the redux data center (store). After calling the dispatch function to modify the data state, trigger the processing logic to register and update the view through subscribe, including the data to be rendered and the function to update the data.

It is mainly used to wrap components that need to use Redux at the entrance. Essentially, store is put into context.

Because the coupling between redux and components is too high, in order to decouple, redux is designed. Once we have introduced react-redux, we no longer need to subscribe to the status ourselves using store's subscribe. There is no redux inside UI components, just like ordinary components. It's more readable.

Action 1

The component is divided into the container component and the UI component. The UI component obtains the state and operation state through props.

Action 2

Use the Provider component instead of the store.subscribe in redux to listen for changes in the state of the component, which is used to render the component.

Action 3

In the container component, connecting the UI component and redux,connect through the core API connect is a high-order function. The first parameter receives two callback functions, callback function 1: it receives a state, and then returns an object that contains the desired state of the UI component. Callback function 2: receives a dispatch and returns an object that contains the method that the UI component wants to operate on. At the same time, there is a shorthand method, which is that the second parameter is passed directly to an object, which contains the method of the operation state. (core: mapping state and dispatch to props of UI components)

Core code

Export default connect (state = > ({count: state}), dispatch = > {return {increment: number = > dispatch (increment (number)), decrement: number = > dispatch (decrement (number)),}}) (Counter)

The following is an abbreviated form

Export default connect (state = > ({count: state}), {increment,decrement}) (Counter) this is the end of the article on "what is the function of react-redux". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the role of react-redux". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.