redux

只要用到react的项目都会用到redux

• redux对于JavaScript应用而言是一个可预测状态的容器。是一个应用数据流框架，不同于传统的像angular那样的库或者框架。
• 最主要的就是用作应用状态的管理。
• redux用一个单独的常量状态树（对象）保存一整个应用的状态，这个对象不能直接被改变，当一些数据变化了，一个新的对象就会被创建（使用action和reducers）
• redux是一个范用的状态管理框架
• 主要解决了组件间状态共享的问题，原理是集中式管理

优点：流程规范，减少手动编码量，提高代码效率。
缺点：组件相关数据更新时，组件需要重新渲染，可能会影响效率，需要写复杂的shouldComponentUpdate进行判断。

三个核心api：Action、Reducer、Store。（可以加一个View）

store 仓库
提供维持应用的state；
提供getState() 方法获取state；
提供dispatch（action)方法更新state；
通过subscribe(listener)注册监听器。

action
发送的对象必须有type属性

reducer 核心
纯函数，使用switch方法进行判断，给store上的Action发送过来的type类型做逻辑上的处理。
不能改写参数，不能调用系统I/O的API，不能调用不纯的方法（Math.random()每次得到不同的数据)。

todolist

把获取的数据给action对象上的某个方法，参数msg为该数据

var Action ={
    addItem(msg){
        return{
            type:"ADD",
            text:msg
        }
    }
}

调用为： Action.addItem(this.refs.ipt.value)

下面Store来接收Action

Store.dispatch(Action.addItem(this.refs.ipt.value))

Store.js中

import {createStore} from 'redux'  //redux的核心api，创建Store
import Reducer from './Reducer' //Reducer是一个纯函数
var Store= createStore(Reducer)
export default Store;

Reducer.js 中，两个参数
state初始状态，状态不可改变，处理完后返回一个新的状态树。
action接过来的action对象

var Reducer=((state=[],action)=>{
	switch (action.type){
			case "ADD":
			let arr=[...state]
			arr.push(action.text)
			return arr;
		default:
			return state;
	}
})
export default Reducer;

视图中想要更新
通过状态state，调用Store中的getState()方法，获取Store的所有数据
在componentDidMount（）中调用Store的subscribe方法，监听change

this.state={ list:Store.getState() }

componentDidMount(){
        Store.subscribe(this.changeItem)  //注意this指向
    }

最后展示，可以使用map方法

reducer拆分： 使用combineReducers

import {combineReducers} from 'redux'

import List from './List'  //新建List.js把逻辑处理放在List里，list里state是数组，可以新建其他类型，‘’，{}...
 var Reducer=combineReducers({
    list:List
 })
export default Reducer;

获取数据改为list:Store.getState().list

Redux异步流
中间件Middleware
可以使用的插件：redux-thunk、redux-saga、redux-promise

使用方法：

1. 引入：import thunk from ‘redux-thunk’;
2. 加入中间件：const store=createStore(Reducer,applyMiddleware(thunk))
3. 在store接收数据的时候做一个延时操作

Store.dispatch(()=>{
	setTimeout()=>{
		dispatch(Action.addItem(this.refs.name.value)
	}
})