Redux 入门学习教程（一）-- 核心 API 以及 工作流程

看到了非常好的入门教程，对刚学习 Redux 的我帮助很大，稍做整理，在这和大家分享~

什么是 Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览

安装 Redux

npm install redux --save

多数情况下，我们还需要使用 React 绑定库和开发者工具

npm install redux-devtools --save-dev

Redux三大原则

• 单一数据源
  整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于一个 唯一的store 中。
• State 只读
  惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
• 使用纯函数来执行修改
  为了描述 action 如何改变 state tree ，你需要编写 reducers。

核心API

State - 状态

就是传递的数据。Store 对象包含所有数据，如果想得到某个时点的数据，就要对 Store 生成快照。这种数据集合，就叫做 State。
大致分为三类：

1. DomainDate：业务领域内的状态、服务器端的数据
   比如：获取用户的信息、商品的列表等
2. UI State：决定当前UI展示的状态
   比如：弹窗的显示隐藏、受控组件等
3. App State：全局的状态
   比如：当前是否请求loading，当前路由信息等可能被多个组件使用得到的状态

当前时刻的 State，可以通过store.getState()拿到

Action - 事件

Action 是把数据从应用传到 store 的载体，是 store 数据的唯一来源，Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中必须包含 type 属性，表示 Action 的名称。其他属性可以自由设置

const action = {
      type: '名称',
      info: 'Learn Redux'
};

Action 的名称是 type 定义的，它携带的信息是字符串Learn Redux。

// action 创建函数
function addAction(params) {
      return {
            type: '名称',
            ...params
      }
};

可以通过 store.dispatch() 将 action 传递给 store。

Reducer - 纯函数

reducers 接收先前的 state 和 action，并且返回新的 state

const reducer = function (state, action) {
      return new_state;
};

store.dispatch 方法会触发 Reducer 的自动执行。
在生成 Store 的时候，将 Reducer 传入createStore方法

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

Store

Store 就是保存数据的地方，它把 action 和 reducer 联系到一起。整个应用只能有一个 Store。
Redux 提供 createStore 这个函数，用来生成 Store。

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

createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

梳理 Redux

1、维持应用的 state
2、getstate() 方法获取 state
3、dispatch() 方法发送 action