What is react-redux used for?

The functions of "react-redux": 1. Divide components into container components and UI components; 2. Replace "store.subscribe" in redux to monitor the state changes of components and use them to render components; 3. Used with redux, components can easily obtain global status and facilitate communication between components.

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

What is the use of react-redux

react-redux is used in conjunction with redux. Injecting the store data defined by redux into the component allows the component to easily obtain the global state and facilitate communication between components. communication. Connect the react package with the redux data center (store). After calling the dispatch function to modify the data status, the processing logic of updating the view through subscribe registration is triggered, including the data that needs to be rendered and the function that updates the data.

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

Because the coupling between redux and components is too high, redux was designed in order to decouple it. Once we introduce react-redux, we no longer need to use the store's subscribe to subscribe to the state ourselves. UI components are just like ordinary components without redux inside. More readable.

Function 1

Divides components into container components and UI components. UI components obtain status and operation status through props method.

Function 2

Use the Provider component to replace store.subscribe in redux to monitor the state changes of the component and use it to render the component.

Function 3

In the container component, the UI component and redux are connected through the core API connect. Connect is a high-order function. The first parameter receives two A callback function, callback function 1: will receive a state, and then return an object object containing the desired state of the UI component. Callback function 2: Receive a dispatch and return an object, which contains the methods that the UI component wants to operate on. There is also a shorthand method, which is to pass the second parameter directly into an object, which contains methods for operating status. (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 the abbreviation

export default connect(
    state => ({count: state}),
    {increment,decrement}
)(Counter)

Recommended learning: "react Video tutorial》

The above is the detailed content of What is react-redux used for?. For more information, please follow other related articles on the PHP Chinese website!