前言

随着 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: 若有错误或不准确的地方，欢迎指正！感谢！