Redux从理论到应用

随着单页面应用的开发日趋复杂，一个model的变化经常引起另一个model的变化，一个view的改变时常也会引起对应model以及另一个model的改变，javascript需要管理越来越多的state。Redux试图让state的变化变得可预测

三大原则

单一数据源
整个应用的state被存储在一颗object tree中，并且这个object tree只存在于唯一一个store中。
当我们有多个数据需要放到redux中管理时，是放在一个对象里，这个对象放在store中管理，虽然redux并没有强制只能创建一个store，但是多个数据源的话不那么容易管理，单一的数据源可以更好的追踪状态的变化。
state是只读的
唯一改变state的方法就是触发action，action是一个用于描述已经发生事件的普通对象。
这样确保了视图和网络请求都不能直接修改state，相反他们只能表达想要修改的意图。因为所有的修改都被集中化处理，且严格按照一个接一个的顺序执行。action是一个普通的js对象，因此可以被日志打印、序列化、存储、后期调试或测试时回放出来。
使用纯函数来执行修改
为了描述action如何改变state tree，你需要编写reducers.
Reducer只是一些纯函数，他接收先前的state和action，并返回新的state。
作用：1.初始化状态 2.更新状态

Action

Action是把数据从应用（可能是服务器响应、用户输入或者其他非view的数据）传到store的有效载荷。他是store数据的唯一来源。
Action是动作，一个普通的js对象，包含了两个属性，type是需要完成的动作，payload是完成该动作要传递的参数，只是描述有这个事情要发生，但是没有说明这个事情怎样去更新状态state。
一般我们通过store.dispatch()将action传到store。
Action创建函数
Action创建函数就是生成action的方法，“action”和“action创建函数”这两个概念很容易混在一起。
在Redux中的action创建函数只是简单的返回一个action：

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Reducer

Reducer指定了应用状态的变化如何响应actions并发送到store的，actions只是描述了有事情发生了这个事实，但是并没有描述应用如何更新state。
Reducer是一个纯函数，接收旧的state和action，返回新的state。

(previousState,action)=>newState

之所以将这样的函数称之为reducer，是因为这种函数与被传入Array.prototype.reduce(reducer,?initialValue)里面的回调函数属于相同的类型。

保持reducer纯净非常重要，永远不要在reducer中做这些操作：
1.修改传入参数
2.执行有副作用的操作，如API请求和路由跳转
3.调用非纯函数，如Data.now()或Math.random()

我们将以指定state的初始状态作为开始。Redux首次执行时，state为undefined，此时我们可以借机设置并返回应用的初始state。

const initialState={
	visibilityFilter:VisibilityFilters.SHOW_ALL,
	todos:[]
};
function todoApp(state,action){
	if(typeof state==='undefined'){
		return initialState
	}
	//这里暂不处理任何action
	//仅返回传入的state
	return state
}

当然，我们可以通过ES6的参数默认值语法来精简代码。

function todoApp(state=initialState,action){
	//这里暂不处理任何action
	//仅返回传入的state
	return state
}

现在处理SET_VISIBILITY_FILTER。需要做的只是改变state中的visibilityFilter。

function todoApp(state=initialState,action){
	swich(action.type){
		case SET_VISIBILITY_FILTER:
			return Object.assign({},state,{
				visibilityFilter:action.filter
		})
		default:
			return state
	}
}

注意：
1.不要修改state！！！使用object.assign（）新建了一个副本。熟悉Object.assign（）语法的知道，不能这样使用Object.assign(state, { visibilityFilter: action.filter })，因为Object.assign（）会改变第一个参数的值。你必须把第一个参数设置为空对象，去建立一个副本，从而不修改原本的state。
2.在default情况下返回旧的state。遇到未知的action时，一定要返回旧的state。

Store

在前面我们知道了action来描述“发生了什么”，reducer来根据action更新state的用法。

Store就是将他们联系到一起的对象。

• 维持应用的state
• 提供getState（）方法获取state
• 提供dispatch(action)方法更新state
• 通过subscribe（listener）注册监听器
• 通过subscribe（listener）返回的函数注销监听器

根据已有的reducer创建store非常容易。使用combineReducer（）将reducer合并成为一个，并传递createStore（）

import {createStore} from 'redux'
import todoApp from './reducers'
let store=createStore(todoApp)