React-Redux

Redux 只是一种状态管理的解决方案

Store：数据仓库，保存数据的地方
State：是一个对象，数据仓库里的所有数据都放到一个state里面。
Action:1个动作，用来触发数据改变的方法。

Dispatch:将动作触发成方法。
Reduce：一个函数，通过获取动作， 改变数据，生成一个新的State，从而改变页面

安装
cnpm install redux --save

初始化数据
const store=createSore(reducer)
获取数据
let state = store.getState()
修改数据
store.dispacth({type:"add",content:{id:1,msg:"hello"}})
修改视图
store.subscribr(()=>{
    ReactDom.render(<Counter/>,document.getElemnetById("root"))
})

React-redux

安装
npm install react-redux -save

新概念：
Provider组件：自动将store里的state和组件进行关联，
MapStatetoProps:这个函数用于将store的state映射到组件的props
mapDispatchToProps：将store中的dispatch映射到组件的props里实现了方法的共享
connect方法：将组件和数据(方法)进行连接。

使用：
初始化数据：实例化store
function reducer(state={num:0},action){
    switch(action.type){
        case "add":
        state.num++;
        break;
        default:
            break;
    }
    return {...state}
}

const store = createStore(reducer)
获取数据：
//1.将state映射到props函数
function mapStateToprops(state){
    return{
        value:state.num
    }
}

//2.将修改state数据的方法，映射到props,默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch){
    return{
        onAddClick:()=>{
           dispatch(addAction)
        }
    }
}

//将上面的这两个方法，将数据仓库的state和修改state的方法映射到组件上形成新的组件
const App = connect(
    //注意顺序
    mapStateToprops,
    mapDispatchToProps,
)(Counter)

class Counter extends React.Component{
    render(){
        //计数，通过store的state传给props，直接通过props就可以将state的数据获取
        const  value = this.props.value;
        console.log(value);
        //将修改数据的事件或者方法传入到props
        const onAddClick = this.props.onAddClick;
        //等同于mapMutation mapState
        return(
            <div>
                <h1>计数的数量：{value}</h1>
                <button onClick={onAddClick}>数字+1</button>
            </div>
        )

    }
}