React中的的数据管理Redux

1.作用

用于中大型的应用，当数据比较庞大，组件之间数据交互较多时使用
解决组件的数据通信
解决数据数据和交互较多的应用
解决React的数据管理问题

2.几个概念

1. store：数据仓库，保存数据的地方
2. state：一个对象，存放了整个应用所需要的数据
3. action：一个动作，触发改变数据的方法
4. dispatch：将动作触发成方法
5. reducer：一个函数，通过获取action，改变数据，生产一个新的state

3.安装

安装：

 cnpm i redux --save

4.基本使用

1. 导入Redux：
   主要要导入createStore

import Redux,{createStore} from 'redux'

2. 创建reducer

//一个方法，用于通过action创建一个新的state
//作用：
//1.初始化数据
//2.通过action.type对state进行修改
var reducer=function(state={num:0},action){
    switch(action.type){
        case 'add':
            state.num++
            break
        case 'reduce':
            state.num--
            break
        default:
            break
    }
    return state
}

3. 创建store

//创建仓库
//需要传入一个redecer
//当store被调用时，store会调用reducer来进行对state的处理
var store=createStore(reducer)

replaceReducer

作用：这个方法可以更换reducer
使用：

store.replaceReducer(reducer)

4. 创建方法使用store.dispatch

//这两个方法使用了store.dispatch来触发store调用redecer
//通过传递一个action对象{type:''}来进行对redecer方法中的switch的控制
function add(){
    store.dispatch({type:"add"})
}
function reduce(){
    store.dispatch({type:"reduce"})
}

dispatch的参数

这里的对象对应的就是redecer中的action，可以往这个对象中加入一切数据
例如：

store.dispatch({type:"add",context:{msg:'aaa'}})
//这里的context可以改为其他，接收时对应即可

可以这样接收

console.log(action.context.msg)

5. 渲染到页面并调用方法

ReactDOM.render(
    <div>
     	{/*可以通过store.getState获取state  */}
        <h3>计算数据：{store.getState().num}</h3>
        <button onClick={add}>+1</button>
        <button onClick={reduce}>-1</button>
    </div>
    ,document.getElementById('app')
)

6. 使用store监听state的改变并重新渲染

store.subscribe(()=>{
    ReactDOM.render(
        <div>
            <h3>计算数据：{store.getState().num}</h3>
            <button onClick={add}>+1</button>
            <button onClick={reduce}>-1</button>
        </div>
        ,document.getElementById('app')
    )
})

使用redux可以实现组件之间的传值