How to realize data sharing among react components by react-redux

This article mainly explains "react-redux how to achieve data sharing between react components", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "react-redux how to achieve data sharing between react components" bar!

Using react-redux to realize data sharing among react components

1. Install react-redux

$npm I-- save react-redux

two。 Import the Prodiver component from react-redux to assign store to the store attribute of Provider

Wrap the root component in Provider.

Import {Provider,connect} from 'react-redux'ReactDOM.render (, document.getElementById (' example'))

So that all the subcomponents in the root component can get the values in the store

3.connect secondary encapsulation root component

Export default connect (mapStateToProps,mapDispatchToProps) (Wrap)

Connect takes two functions as parameters, a mapStateToProps defines which store attributes are mapped to properties on the root component (passing store into the react component), and a mapDispatchToProps defines which behaviors action can be used as root component properties (passing data from the react component to store)

3. Define these two mapping functions

Function mapStateToProps (state) {return {name:state.name, pass:state.pass}} function mapDispatchToProps (dispatch) {return {actions:bindActionCreators (actions,dispatch)}}

Map the name,pass in store to the name,pass attribute of the root component.

Actions is an object that contains the action builder function and binds the object actions to the root component actions property with bindActionCreators.

4. Use to transfer store data to the subcomponent where the root component refers to the subcomponent.

5. Call the method in actions in the subcomponent to update the data in store

First pass actions into the subcomponent as an attribute

The child component calls the method in actions to create the action

/ / Input component export default class Input extends React.Component {sure () {this.props.actions.add ({name:this.refs.name.value,pass:this.refs.pass.value})} render () {return (name: password: login)}}

Because we use the bindActionCreators function, store.dispatch (action) is automatically called to update the data to store. Action immediately after creating the action.

Thank you for reading, the above is the content of "react-redux how to achieve data sharing between react components". After the study of this article, I believe you have a deeper understanding of how react-redux achieves data sharing between react components, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!