Redux

官网：https://www.reduxjs.cn/

Redux 是针对 JavaScript 应用程序的可预测状态容器。

解决项目数据管理、组件通信，用于数据和交互较多的应用

一、安装

cnpm install redux --save

二、创建Store

　　Store 就是用来维持应用所有的 state 树 的一个对象。 改变 store 内 state 的唯一途径是对它 dispatch(action)。

　　 Store 的职责：

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

import { createStore } from 'redux';
// 创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
const store = createStore(reducer);

三、Reducer

　　reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。　

function reducer (state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

四、Action

　　Action：一个普通对象，触发数据（State）改变的方法，type属性必需，表Action的名称，其他key为携带信息，如：{ type:'ADD_TODO',text:'old value' }

　　Action 创建函数： 生成 action 的方法，示例如下

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

五、dispatch

　　Dispatch：触发action，执行reducer，更新state

store.dispatch(makeAction('new value'))

六、subscribe(listener)

　　监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。

// 注册监听器
const unsubscribe=store.subscribe(()=>{console.log(store.getState())})
// 解绑监听器
unsubscribe()