React中使用React-Redux

1. 安装：npm i react-redux
2. 在祖先组件【index.js】中，导入Redux。
3. 使用Provider包裹祖先组件的内容。并在Provider中传递store属性。

   // index.js
   import ReactDOM from 'react-dom'; // 虚拟DOM转换为真实DOM
   import React from 'react'; // 将JSX转换为createElement
   import App from "./App";
   import {Provider} from "react-redux";
   import store from "./store/store";
   ReactDOM.render(
       /*注意到利用Provider将祖先组件包裹起来，并通过Provider的store属性将Redux的store传递给Provider，那么就可以在所有后代中直接使用Redux了*/
       <Provider store={store}>
           <React.StrictMode>
               <App/>
           </React.StrictMode>
       </Provider>
       , document.getElementById('root'))
   

4. 在后代组件中定义mapStateToProps、mapDispatchToProps方法。并使用connect将两个方法和子组件建立关系

// Son3.js
import React from 'react'; // 生成虚拟DOM
import store from "../store/store";
import {connect} from "react-redux";
import {addAction, subAction} from "../store/action";

class Son3 extends React.PureComponent {
    render(){
        return (
            <div>
            {/*通过PROPS来使用redux中保存的数据*/}
                <p>{this.props.count}</p>
                <button onClick={()=>{this.props.increment()}}>递增</button>
            </div>
        )
    }
}
// 在mapStateToProps方法中告诉React-Redux，需要将store中保存的哪些数据映射到当前组件的props上
const mapStateToProps = (state) => {
    return {
        count: state.count
    }
}
// 在mapDispatchToProps方法中告诉React-Redux，需要将哪些派发的任务映射到当前组件的props上
const mapDispatchToProps = (dispatch) => {
    return {
        increment(){
            dispatch(addAction(1))
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Son3); // 暴露给外界