redux之react-redux的使用

React：负责组件的UI界面渲染；
Redux：数据处理中心；
React-Redux：连接组件和数据中心，也就是把React和Redux联系起来。

他们三者之间的交互，可以由下图概括：

React-Redux
Redux 本身和React没有关系，只是数据处理中心，是React-Redux让他们联系在一起。

React-Redux提供两个方法：connect和Provider。

connect
connect连接React组件和Redux store。connect实际上是一个高阶函数，返回一个新的已与 Redux store 连接的组件类。

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)

VisibleTodoList就是由 react-redux 通过connect方法自动生成的容器组件。

mapStateToProps：从Redux状态树中提取需要的部分作为props传递给当前的组件。
mapDispatchToProps：将需要绑定的响应事件（action）作为props传递到组件上。

Provider
Provider实现store的全局访问，将store传给每个组件。
原理：使用React的context，context可以实现跨组件之间的传递。

React-Redux 将所有组件分成两大类：
UI 组件（presentational component）和容器组件（container component）

UI组件
只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API

容器组件
负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API

1:安装react-redux

npm install react-redux --save

2:引入提供者

import {Provider} from “react-redux”;

3:把stroe全局挂载

render(
<Provider store={store}>
<Home header="头部描述" content="内容描述" footer="底部描述"  isLogin={true}/>
</Provider>
,document.getElementById("root")); 

4 新建一个子组件 MyRedux带store指令的

整个代码变成

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class MyRedux extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

const mapStateToProps = (state) => ({//设置要的属性
        
})

const mapDispatchToProps = {//设置要的方法
    
}

export default connect(mapStateToProps, mapDispatchToProps)(MyRedux)

修改方法 导入需要的方法

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {add,reduce} from "../../action/numAction"

export  class MyRedux extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <div>
                你好
                <button onClick={this.props.reduce}>-</button>
               <span>{this.props.num}</span>
               <button onClick={this.props.add} >+</button>
            </div>
        )
    }
}

核心点 
const mapStateToProps = (state) => ({//设置要的数据放入props中
  num:state.fn.num
})

const mapDispatchToProps = {//设置要的方法放入props中
    add,reduce
}
export default connect(mapStateToProps, mapDispatchToProps)(MyRedux)