基本结构

人们喜爱 Redux 的原因之一是它的简洁性。因此，与其它框架不同，我们不需要仅仅通过研究 API 来学习，而是可以从自己实现 Redux 开始。

Redux 的核心思想是：store 将应用程序的所有状态集中保存在一个地方。为了在应用中使用这一理念，我们需要找到一种方式来：

1. 修改状态，以响应事件（用户操作或来自服务器的事件）。
2. 监听状态的变化，以便更新 UI。

第一部分可以拆分为两个功能模块：

• 通知 store 某个动作已经发生。
• 帮助 store 根据应用逻辑决定如何修改状态。

基于这种结构，我们将构建一个简单的应用，实现一个 counter 功能。该应用将仅使用原生 JavaScript 和 HTML，无需任何额外库，可在任意现代浏览器中运行。

我们将有两个按钮，用于增加和减少一个简单的计数器，并有一个位置显示当前的计数器数值。

1<!-- index.html 文件 -->
2<div>
3  计数器：
4  <span id='counter'></span>
5</div>
6
7<button id='inc'>增加</button>
8<button id='dec'>减少</button>

我们的应用状态只需保存计数器的值：

1// 一个简单的状态，包含计数器
2let state = {
3  counter: 3
4};

目前应用的效果如下：