前言
随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。
管理不断变化的 state 非常困难，因此，如何优雅的管理应用中的数据状态成为了一个需要解决的问题。
当下已有不少优秀的状态管理工具可以帮助我们解决这一难题，接下来的这段时间，我会选择现目前比较流行的 Redux 和 Mobx来进行学习实践，并将学习轨迹记录于此，便于日后查阅和巩固。
本篇文章记录Redux的一些基础知识。
Redux是什么
专注于状态管理的库， 和 React 解耦。Redux 可以支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。基本中心思想可以描述如下：
(state, action) => newState
Redux核心概念
- state-状态树
例如：
{
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Exercise',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
- Action
Action本质上是JavaScript普通对象，是把数据从应用传到 store 的有效载荷。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。除了 type 字段外，action 对象的结构完全由开发者自己决定。
{
type: '吃苹果',
text: '我吃了一个苹果'
}
- Reducer
Reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。其指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。 - Store
Store 是把action 和 reducers联系到一起的对象，有以下职责：
（1）维持应用的state；
（2）提供getState()方法获取state；
（3）提供dispatch(action)方法更新state；
（4）通过subscribe(listener)注册监听器；
（5）通过subscribe(listener)返回的函数注销监听器；
简单的redux应用
- 通过reducer新建store，随时通过store.getState获取状态
- 需要状态变更时， 使用store.dispatch(action)来修改状态
- Reducer 函数 接收state 和 action，返回新的state，可以用store.subscribe监听每次修改
import { createStore } from 'redux'
// reducer，根据老的state和action， 返回新的state
const counter = (state={}, action) => {
switch (action.type) {
case '摘苹果'：
return state+1;
break;
case '吃苹果'：
return state-1;
break;
default:
return state;
break;
}
}
// 新建store
const store = createStore(counter)
// 获取状态
const init = store.getState()
console.log(`最初篮子里有${init}个苹果`) // 最初篮子里有0个苹果
const listener = () =>{
const current = store.getState()
console.log(`现在篮子里有${current}个苹果`)
}
// 订阅listener，每次修改state,都会执行listener
const unsubscribe = store.subscribe(listener)
// 使用store.dispatch(action)来修改状态
store.dispatch({ type: '摘苹果'}) // 现在篮子里有1个苹果
store.dispatch({ type: '摘苹果'}) // 现在篮子里有2个苹果
store.dispatch({ type: '吃苹果'}) // 现在篮子里有1个苹果
// 停止监听 state 更新
unsubscribe();
补充知识点
function counter(state=0, action) {...}
其中state=0是es6中为函数参数指定默认值的写法，即调用该函数时，若不传对应的参数，或传undefined， 则使用指定的默认值。
PS: 若有错误或不准确的地方，欢迎指正！感谢！
