React Series (v) using Redux in react

Source: Internet
Author: User



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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.