#npm 包 redux-via-decorators 使用教程
##介绍
Redux 是一个建立在 Flux 架构基础之上，用于前端应用状态管理的库。它提供了可预测的状态容器，在应用这一复杂的状态管理范畴中，充当单一数据源。随着 React 框架的崛起，Redux 也被广泛应用到 React 应用中。
Redux 的核心概念虽然简单易懂，但是 Redux 的代码比较繁琐，使用起来也比较复杂，导致在使用 Redux 时需要编写大量的模板式代码，尤其是 Redux 的表单处理部分。这也从某种程度上影响了 Redux 的开发者使用体验。
为了解决开发者在 Redux 中大量使用重复性代码的问题，一位名叫 Brian Hann 的开发者基于 ES7 的装饰器语法，创建了一个 npm 包 redux-via-decorators，它对 Redux 库进行了简单的封装，大大简化了 Redux 应用中的代码编写。
在接下来的文章中，我们将详细介绍如何使用 redux-via-decorators 包，并以实例代码进行讲解。
##模块介绍
redux-via-decorators 提供了以下模块：
Action, 它是 redux-via-decorators 包中最基本的模块，定义一组 Redux Action。ActionCreator, 它是一个工厂类，用于创建并返回一个Action实例。Reducer, 它是 Redux Reducer 中的一个装饰器，用于组装一个或多个 Actions。State, 它是 Redux Store 中的一个装饰器，用于标记修改了该状态和管理相应的 reducer。
以上四个模块大大简化了 Redux 库的使用方式。
###使用方法
安装 npm 包 redux-via-decorators:
--- ------- -------------------- ------
导入需要的模块：
------ - ------ ------- -------------- ------- - ---- ----------------------
##实例代码
###Step 1: 创建一个 State
首先需要在Redux中定义 State:
-------- -------- - -- ----- --------- - -
上述代码定义了一个名为 TestState 的 State 类，它拥有一个名为 counter 的初始状态值，初始值为 0。
###Step 2： 创建一个 Action
定义一个 Action:
--------------------
----- ---------- -
------------------ ------- ------- - -
-上述的代码定义一个名为 TestAction 的 Action 类，它接收一个参数 amount，用于表示增加计数器的数量。Action 的关键在于它的标识符: 'INCREMENT'。
###Step 3： 创建一个 Reducer
定义 Reducer:
-------------------
----- ----------- -
--------------------------
---------------- ---------- ------- ----------- -
------ - --------- -------- ------------- - ------------- -
-
-TestReducer 是一个 Reducer 类型的装饰器，用于定义 TestState 状态的 reducers。其中 TestReducer 装饰器的第一个参数，是一个 State 的类名；TestAction 则是一个用于创建并返回一个 TestAction 类的工厂方法；increment 方法则是用于处理增加计数器 Action 的四个参数：state, action,dispatch,stateChange。
###Step 4： 创建 Store
创建 Store:
------ - ----------- - ---- ------- ------ - ------------ --------- - ---- ------------ ----- ----- - -----------------------------------
上述代码根据通过 TestState 获取到的 reducer 创建了一个 Store。
###Step 5：使用 Action 更新 State
使用 Action 方法创建新的 action:
------ - --------- - ---- ------------ ----------------------------
上述代码分配了一个增加计数器值为 1 的 action。在 dispatch 过程中，TestReducer 就会执行增加计数器的操作。
以上就是使用 redux-via-decorators 包的完整示例。
##总结
使用 Redux 库存在重复性阻碍语法难以使用的问题，但通过使用 Redux via decorators 可以简单的转换为易于使用的语法。这样的话，使用 Redux 也就可以快速进行应用程序开发。本文中提到的所有关键代码都可以在 demo 中找到，如果有任何问题，请参考。
##参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005749d81e8991b448ea1b9