白话Redux工作原理。浅显易懂。 如有纰漏或疑问，欢迎交流。
Redux 约法三章
唯一数据源(state)
虽然redux中的state与react没有联系，但可以简单理解为react组件中的this.state。
html文档只是state的一种表现形式。所有html的数据应该都是直接或间接来自于state，否则UI视图是无法因state改变而更新的。 数据源(state)只读
不应该直接修改state数据。
Array.prototype.slice()//对数组进行拷贝//使用ES6： [...state, ...newState]
对于对象使用：
Object.assign({}, state, change1, change2...)//对对象进行拷贝//使用ES6:{...state, ...newState} 通过纯函数(pure function)改变数据源(state)
pure function: 无其他API（包括Math, Date等）调用，无异步操作，preState => newState。
Redux数据流
简单介绍store/reducer/action， 比较简洁，请牢记于心。
store
UI唯一数据来源，可以理解为react中的state，store信息的变化会触发视图更新.action
对象。必须拥有type属性,用来描述发生什么。可选择携带发生时的数据，如用户输入的input value。切记：仅仅用来表述发生了什么。reducer
pure function（上面有解释）。根据action.type来做出反应，(preState, action) => newState，生成的state是用来改变store的。所以，data flow（数据流）:
- UI发出动作，如click, submit;
- action, 描述发生了什么;
- reducer处理发生的事情，生成新state;
- store被更新；
- UI响应store更新
- ...
Redux action
举几个例子，可能会比较直观：
{ type: “TOGGLE_TODO”, //这个type属性必须要，必须是字符串 index: 5 //附加信息，自己根据需要选择是否加入}；{ type: “ADD_TODO”, text：“学习Redux” //附加信息，这里是input value} 没别的，就是这么简单。
有时候可以使用action生成器(action creators)来批量生产相似action对象，如：//我需要根据不同的input value来生成高度相似的action:function (text) { return { type: "ADD_TODO", text: text //附加的信息 }} 说明
虽然上面数据流提到，action通过reducer处理生成newState后才能够更改store信息。但是为了更好的语义编程，Redux通过语句store.dispatch(action)来更新store，reducer对action的处理在内部处理。 Redux reducer
很简单
(theState, action) => (newState);//仅仅只是根据action.type处理一下需要更新的state
来看一个相对完整的reducer:
function todoApp(state = initialState, action) { //注意需要处理undefined情况下的state默认值 switch (action.type) { //根据action.type来判断 case "SET_VISIBILITY_FILTER": return Object.assign({}, state, { visibilityFilter: action.filter }) case “ADD_TODO”: //处理“ADD_TODO”的action type //返回新state(newState),注意不要直接改变state，对象使用了 //Object.assign()。也可以使用ES的...操作符 return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] }) case “TOGGLE_TODO”: //处理“TOGGLE_TODO”的action type return Object.assign({}, state, { todos: state.todos.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) }) default: return state }} Redux store
store
UI视图唯一数据来源（直接或间接），可以获取state，更新state，监听state变化，取消监听。所以store提供了一下方法：-
store.getState()获取当前state -
store.dispatch(action)更新state -
store.subscribe(listener)store更新后回调listener，回调函数里面可以调用store.getStore()来获取更新后得state哟~ - 取消listener的方式比较特别：再调用一次
store.subscribe(sameListner)
ps: 如有纰漏或疑问，欢迎交流。
先写这么多，有时间继续更新。