Redux 学习系列（一） —— 基础概念入门篇

简介

Redux 是一个可预测的 JavaScript 应用状态管理容器，也可以说是一个应用数据流框架。

作用

Redux 主要是用作应用状态的管理。它抽离所有组件的状态，构造一个中心化的单独常量状态树（对象）来保存这一整个应用的状态。这棵状态树与 React 组件树一一对应，相当于对 React 组件树进行了状态化建模：

1. redux可以无视组件层级；
2. 对于组件系统来说，redux就是一个第三方的，全局的“变量”。

特性

• 可预测
  Redux 可以开发出行为稳定可预测、可运行在不同环境 （客户端、服务端和原生程序）且易于测试的应用。
• 集中管理
  集中式存储和管理应用的状态，可以开发出强大的功能，如撤销/重做、 状态持久化等等。
• 可调试
  Redux DevTools 可以轻松追踪到应用的状态在何时、何处以及如何改变。
• 数据流清晰
  Redux 的架构可以记下每一次改变，借助于 “时间旅行调试”，甚至可以把完整的错误报告发送给服务器。
• 灵活
  Redux 可与任何 UI 层框架搭配使用，并且有庞大的插件生态。

学习文档

Redux 中文官网

优点

在应用中使用 Redux 有如下好处：

1. 预测
   始终有一个准确的数据源，就是 store，对于如何将 actions 以及应用的其他部分和当前的状态同步可以做到绝不混乱。
2. 维护
   具备可预测结果的性质和严格的组织结构让代码更容易维护。
3. 组织
   对代码应该如何组织更加严苛，这使代码更加一致，对团队协作更加容易。
4. 测试
   编写可测试代码的首要准则就是编写可以仅做一件事并且独立的小函数。Redux 的代码几乎全部都是这样的函数：短小、纯粹、分离。
5. 服务端渲染
   可以带来更好的用户体验并且有助于搜索引擎优化，尤其是对于首次渲染。仅仅是把服务端创建的 store 传递给客户端就可以。
6. 开发者工具
   开发者可以实时跟踪在应用中正在发生的一切，从actions 到状态的改变。
7. 社区与生态圈
   存在很多支持 Redux 的社区，使它能够吸引更多的人来使用。

核心概念

Redux 核心概念有三个：action、store、reducer。

store

在 Redux 里面， Store 是一个仓库，整合 action 和 reducer，用来保存整个应用需要管理的数据 state 。（与vuex 的 store 意义上相似）

Redux 提供了一个 createStore 来创建 state。如下：

import {
    createStore } from 'redux';
// 创建 store
let store