npm 包 redux-via-decorators 使用教程-JavaScript中文网-JavaScript教程资源分享门户

#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:

npm install redux-via-decorators --save

导入需要的模块：

import { State, Action, ActionCreator, Reducer } from 'redux-via-decorators'

##实例代码

###Step 1: 创建一个 State

首先需要在Redux中定义 State:

@State({ counter: 0 })
class TestState { }

上述代码定义了一个名为 TestState 的 State 类，它拥有一个名为 counter 的初始状态值，初始值为 0。

###Step 2：创建一个 Action

定义一个 Action:

@Action('INCREMENT')
class TestAction {
    constructor(public amount: number) { }
}

上述的代码定义一个名为 TestAction 的 Action 类，它接收一个参数 amount，用于表示增加计数器的数量。Action 的关键在于它的标识符: 'INCREMENT'。

###Step 3：创建一个 Reducer

定义 Reducer:

@Reducer(TestState)
class TestReducer {
    @ActionCreator(TestAction)
    increment(state: TestState, action: TestAction) {
        return { ...state, counter: state.counter + action.amount }
    }
}

TestReducer 是一个 Reducer 类型的装饰器，用于定义 TestState 状态的 reducers。其中 TestReducer 装饰器的第一个参数，是一个 State 的类名；TestAction 则是一个用于创建并返回一个 TestAction 类的工厂方法；increment 方法则是用于处理增加计数器 Action 的四个参数：state, action,dispatch,stateChange。

###Step 4：创建 Store

创建 Store:

import { createStore } from 'redux'
import { getReducers, TestState } from './reducers'

const store = createStore(getReducers(TestState))

上述代码根据通过 TestState 获取到的 reducer 创建了一个 Store。

###Step 5：使用 Action 更新 State

使用 Action 方法创建新的 action:

import { increment } from './reducers'

store.dispatch(increment(1))

上述代码分配了一个增加计数器值为 1 的 action。在 dispatch 过程中，TestReducer 就会执行增加计数器的操作。

以上就是使用 redux-via-decorators 包的完整示例。

##总结

使用 Redux 库存在重复性阻碍语法难以使用的问题，但通过使用 Redux via decorators 可以简单的转换为易于使用的语法。这样的话，使用 Redux 也就可以快速进行应用程序开发。本文中提到的所有关键代码都可以在 demo 中找到，如果有任何问题，请参考。

##参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005749d81e8991b448ea1b9

npm 包 redux-via-decorators 使用教程

纠错反馈

程序员教程

程序员面试题库