Redux 的简单实现

什么是 Redux

Redux 是 JavaScript 的状态容器，提供可预测化的管理，可以让你构建一致化的应用，运行与不同的环境（客户端、服务器、原生应用），并且易于测试。（个人理解：Redux 和 Vuex 很像）

优点：

• 可预测：始终有一个唯一的准确的数据源（single source of truth）就是 store，通过 actions 和 reduces 来保证整个应用状态同步，做到绝不混乱
• 易维护：具备可预测的结果和严格的组织结构让代码更容易维护
• 易测试：编写可测试代码的首要准则是编写可以仅做一件事并且独立的小函数（single responsibility），Redux的代码几乎全部都是这样的函数：短小·纯粹·分离

什么时候使用 Redux

• 某个组件的状态，需要共享
• 某个数据需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

也就是：在 多交互、多数据源 中可以考虑使用 redux。

Redux 的三个基本原则

• 单一数据源：整个应用的 state 被储存在一棵 Object tree 中，并且这个 Object tree 只存在于唯一一个 store 中
• reducer：形式为（state，action）=> state 的纯函数，功能是提供action 来修改 state
• store：用于存储 state，你可以把它看成一个容器，整个应用只能有一个 store

简单来理解就是：在组件中共享的数据都存储在 store 中，而 store 是只读的，我们只可以通过 reducer 来改变 store 中的数据

说太多的理论也没多大用，先看一个简单的 demo 吧

大概就这样，没写样式。

主要的功能就是当我点击增加的话，就将文本框中值添加到下面的 ol 中，当我们点击 ol 中的一项时，会删除你点击的那一项

你肯认为很简单，O(∩_∩)O哈哈~，这次我们使用redux，所有数据到会放到state 中的 store 中，这就简单了。

好了，看下面的解析。

Redux 工作流程

如何改变数据呢？

看上图所示：

1. 首先我们会通过 ActionCreators 触发给 Store ，而 Store 默默的把这个触发交给了 Reducers
2. Reducers 处理完结果后会将结果返回给 Store ，从而改变 Store ，这个时候我们必须使用 Store 的一个方法将我们改变的数据渲染到我要改变的组件上

安装

先安装 redux

npm install --save redux

使用

刚刚开始学习 redux，感觉比较怪异，好在多写几遍就好多了。

我使用了 create-react-app 帮我创建一个 react 项目（不用配置），如果没安装，使用进行安装：

npm i create-react-app -g

目录结构：

其中src/store下文件都是一些使用 redux 的文件，src/App.js 这个文件中主要在这里写UI的

App.js 的代码：

import React,{
   Component} from 'react';

import store from './store/store';

import {
   
  addItem,
  alertInputValue,
  deleteItem
} from './store/actionCreator';

console.log(store);

class App extends Component{
   
  constructor(props) {
   
    super(props);
    // 使用 store.getState() 来获取仓库中的数据
    this.state = store.getState();