写在前面：工作项目有用到 DvaJS 框架，以 Redux 为基础，之前只用过 Vuex，借机看看 Redux，文章思路以：为什么是什么怎么用为导向，知识有错漏之处，望斧正 😁

Why 🧐

仅靠 React 是无法完成大型应用的，因为还缺乏 代码结构 和 组件之间的通信。原先有 Flux，后来，出现了 Redux。简单的应用不需要 Redux ，会使其变得复杂，当 多交互、多数据源 以及 需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化 这些情况下去考虑使用。

What 🤗

Redux 的设计思想

Web 应用是一个状态机，视图与状态（state）是一一对应的。
所有的状态（state），保存在一个对象里面。

基本概念和 API

🎈 Store

整个应用只有一个 store，是保存（全局变量）数据的一个容器，用 createStore 创建，createStore 也接受第二个参数，表示初始状态，通常由服务器提供

import { createStore } from 'redux';
const store = createStore(fn);

🎈 State

某个时点的 store 数据，一个 state 对应一个 View，当前时刻的 state 通过 getState 获取

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

🎈 Action

state 的变化会导致 View 的变化，用户接触不到 state，只能通过 View，Action 就是 View 发出的通知（通过 dispatch），告知 state 要发生变化了。Action 是一个对象

const action = {
  type: 'ADD_TODO', // Action 的名称
  payload: 'Learn Redux' // 携带的信息
};

🎈 Action Creator

生成 Action 的函数就叫 Action Creator

const ADD_TODO = '添加 TODO';

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

const action = addTodo('Learn Redux');

🎈 store.dispatch

是 View 发出 Action 的唯一方法，store.dispatch接受一个 Action 对象作为参数，将它发送出去

store.dispatch(addTodo('Learn Redux'));

🎈 Reducer

store 接收到 Action 之后，要去改变 state，View 才会发生变化，这样一个计算过程叫做 Reducer。是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。Reducer 函数负责生成 State。

不用手动调用，只需要将 Reducer 传入createStore方法。触发 dispatch 时会自动调用 Reducer 改变状态

const store = createStore(reducer);

注意： Reducer 是一个纯函数，因此 Reducer 函数里面不能改变 State，必须返回一个全新的对象。

// 理解 Reducer 如何生成新的 state
const chatReducer = (state = defaultState, action = {}) => {
  const { type, payload } = action;
  switch (type) {
    case ADD_CHAT:
      return Object.assign({}, state, {
        chatLog: state.chatLog.concat(payload)
      });
    case CHANGE_STATUS:
      return Object.assign({}, state, {
        statusMessage: payload
      });
    case CHANGE_USERNAME:
      return Object.assign({}, state, {
        userName: payload
      });
    default: return state;
  }
};
// 文章有拆分和合并的实现

🎈 store.subscribe()

监听方法，一旦 State 发生变化，就自动执行这个函数

How 🥱

Reduex 提供了三个方法，store.getState()、store.dispatch()、store.subscribe()

`理解 Redux 的工作流程` 🎃✨

用户在视图层（View）通过 dispath 方法发送 Action 给 store，表示要改变状态。store 接收到 Action 会自动调用 Reducer 方法，入参是当前的 state 和发起的 action，生成一个新的 state。store 的事件监听 store.subscribe()，监听到 state 变化后，用新的 state 去渲染新的 View 回到页面，用户就感受到了页面的变化。

总结

Redux 和 Vuex 状态管理的作用，包括一些思路是一样的。观察者模式，响应式，解决跨页面数据共享，监控工具是 redux devtool

我觉得主要是理解它的数据流是怎么走的
还有就是，和 Vuex 一样，不要滥用，不是大范围需要用到的状态其实真的没必要

Redux 数据仓库入门