React Series (v) using Redux in react

The previous article shows the basic use of redux, you can see Redux is very easy to use, not limited to react, can also be used in angular, Vue and other frameworks, as long as the need to redux the design of the idea of the place, you can use it.
This article mainly explains the use of redux in react, the first is the installation.

Installing React Redux

yarn add redux
yarn add react-redux

There are two concepts:
1. Container assembly (Container components)
2. Display component (presentational components)

Presentation components

• More focused on data presentation, so some dom nesting and CSS will be written
• Usually do not rely on redux to get data directly from the props
• There is usually no state, and occasionally it saves some display states, such as class,
• The interaction is also initiated by the props callback and does not initiate the action directly

Container components

• Usually as a data source, do data distribution work
• Dependent redux
• Data changes by interacting with the store
• Generated by React-redux

In our project, in general, many presentation components are written, and a small number of container components are packaged to package these presentation components.
Next, write a simple counter application that first divides the container components and presentation components.
The counter has three buttons, plus, minus, reset, and a display area.
Because the button triggers both the action and the display, it needs to be made into a hybrid component.
To write the presentation component first is to display the current count.

Import React from ‘react‘;
Const Counter = ({
     Count
}) => (
     <p>The current count is: <span style={{color: ‘red‘}}>count</span></p>
)

Export default Counter;

In general, the container component passes the Store.subscribe incoming callback, subscribes to the store change, and then passes the value through the props into each component.
The Connect method is implemented in React-redux, which generates a high-order component, which is the container component mentioned earlier. This method does a performance optimization to avoid unnecessary repetitive rendering, which is recommended.

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

Mapstatetoprops is a function that listens to changes in the Redux store and maps the value of the store to the corresponding props attribute.

Const mapStateToProps = ({count}) => {count};
// or
Const mapStateToProps2 = (state) => {
     Count: state.count
}

Next, build a container component.

import { connect } from ‘react-redux‘;

const ConnectCounter = connect(
  mapStateToProps
)(Counter);

export default ConnectCounter;

Next is the button component, which requires both presentation and data interaction to be a hybrid component.
Because, you need to dispatch, you need to pass in the second parameter to connect.
Mapdispatchtoprops can be either object or function. Used to map dispatch to props.

Const mapDispatchToProps = dispatch => {
     Return {
         Plus: () => dispatch({
             Type: ‘PLUS’
         })
     }
}
// or combine an object with bindActionCreators mentioned in the previous article
Function plus() {
   Return {
     Type: "PLUS"
   };
}

Function minus() {
   Return {
     Type: "MINUS"
   };
}

Const mapDispatchToProps2 = dispatch => {
     Return bindActionCreators({ plus, minus }, dispatch)
}

import React from ‘react‘;

let Button = ({plus, minus}) => {
    return (
        <>
            <button onClick={plus}>{‘plus‘}</button>
            <button onClick={minus}>{‘minus‘}</button>
        </>
    )
};

Button = connect(()=>{}, mapDispatchToProps2)(Button);
export default Button;

Finally, a provider is provided to provide the global store. A complete example is-codesandbox here.
Thanks for reading.

React Series (v) using Redux in react