Two, react integrated redux

Installation react-redux

yarn add react-redux

Provider incoming store introduced a similar context

import {Provider} from 'react-redux'
import store from '../store/store'

 render() {
    const { Component, pageProps } = this.props;
    return (
      <Layout>
        <Provider store={store}>
        <Component {...pageProps} />
        </Provider>
      </Layout>
    );
  }　　

Import connection assembly {connect} from 'react-redux'

{Connect} from Import 'REACT-Redux'; 

const Index = ({counter, User, the Add, the rename}) => ( 
  <div> 
    COUNT: {name} counter.count: the user.name {} 
    <= {the onClick the Button () => {the Add (. 3)}}> CLICK </ the Button> 
    <INPUT the onChange = {E => the rename (e.target.value)} /> 
  </ div> 
); 

/ ** changed as long as Redux store , mapStateToProps function is called. 
The callback function must return a pure object, which will merge with the props components. 
If you omit this parameter, the component will not you listen Redux store. 
 * / 
Function mapStateToProps (State) { 
  return { 
    counter: state.counter, 
     User: state.user 
    }; 
} 
// dispatch incoming The props 
function mapDispatchToProps (dispatch) { 
  return { 
    the Add: NUM => dispatch ({type:
    rename: name=>dispatch({type: 'UPDATE', name})
  
  };
}
// HOC 连接 React 组件与 Redux store。
export default connect(mapStateToProps, mapDispatchToProps)(Index);