在前端开发中，redux 是一个非常重要的状态管理工具。然而，redux 在使用上也有一些繁琐的地方，比如需要编写大量的 action 和 reducer，以及手动处理 store 的订阅和取消等操作。为了简化这些操作，我们可以使用 redux-decorators 这个 npm 包，它提供了一些装饰器，可以让我们更加方便地使用 redux。
安装
首先，我们需要在项目中安装 redux 和 redux-decorators 这两个包。可以使用以下命令进行安装：
npm install redux redux-decorators
使用
下面我们来看一下 redux-decorators 的使用方法。具体来说，它提供了以下几个装饰器：
@createStore
这个装饰器可以帮助我们创建 store，它接受一个 reducer 并返回一个 createStore 函数。我们可以使用它来创建 store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ----------- -- ---------------- - ---- -------------------
------------
----- ------------ -
------------ - -
------ -
--
---------------- -
------ - ------ ----------- - - --
-
---------------- -
------ - ------ ----------- - - --
-
-------------------- ------ -
------ ------------- -
---- ------------
------ ----------------------
---- ------------
------ ----------------------
--------
------ ------
-
-
-
----- ----- - -------------------------------在上面的例子中，我们使用 @createStore 装饰器创建了一个 CounterStore 类，它包含了一个 initialState 属性和两个方法：increment 和 decrement，这两个方法用于更新 count 属性的值。另外，我们还定义了一个 handleAction 方法，用于处理 action，并返回新的 state。
通过 createReduxStore 函数，我们可以将 CounterStore 转化为一个 redux store，并赋值给 store 变量。
我们可以用 store.getState() 来获取当前的 state，用 store.dispatch(action) 来 dispatch 一个 action，用 store.subscribe(listener) 来订阅 store 的变化，监听函数会在 store 的 state 发生变化后自动触发。
@bindActionCreators
这个装饰器可以帮助我们将 action creators 绑定到 dispatch 函数上，从而直接生成一个可以 dispatch 对应 action 的函数。使用它可以省去我们手动 dispatch 的步骤，让代码更加简洁。
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------------------ -- ---- - ---- -------------------
------------
----- ------------ -
-- ---
-------------------
----------- -
------ - ----- ----------- --
-
-------------------
----------- -
------ - ----- ----------- --
-
-- ---
-
----- ----- - -------------------------------
----- - ---------- --------- - - ---------------------------------在上面的例子中，我们给 increment 和 decrement 方法加上了 @bindActionCreators 装饰器。这样，在调用 increment 和 decrement 方法时，会自动将对应的 action dispatch 出去。最后，我们可以使用 bindActionCreators 函数将 CounterStore 中的 increment 和 decrement 方法绑定到 dispatch 上，得到对应的函数并赋值给 increment 和 decrement 变量使用。
@connect
这个装饰器可以帮助我们将组件与 store 进行连接，使得组件能够读取到 store 中的 state 和 dispatch action 。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------- -- ------------ - ---- -------------------
------------
----- ------------ -
-- ---
-------------------
----------- -
------ - ----- ----------- --
-
-------------------
----------- -
------ - ----- ----------- --
-
-- ---
-
---------------- -- --
------ -----------
--- - ---------- --------- --
----- ------- ------- --------------- -
-- ---
-
----- ----- - -------------------------------
----------------
--------- --------------
-------- --
------------
-------------------------------
--在上面的例子中，我们使用 @connect 装饰器将 Counter 组件与 store 进行连接，传入状态映射函数和 action creators，这样我们就可以在 Counter 组件中通过 this.props.count 获取 state 中的值，并通过 this.props.increment() 来 dispatch increment action。
最后，我们在渲染组件之前，需要使用 react-redux 库提供的 Provider 组件来包裹整个应用，使得每个组件都可以访问到 store。
总结
通过使用 redux-decorators 这个 npm 包，我们可以更加方便地使用 redux，简化大量的工作，使得代码更加简洁易懂。当然，redux-decorators 不是必须使用的，我们可以选择自己喜欢的方式来使用 redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b12