介绍
generator-polymer-init-redux 是一个快速生成 Redux + Polymer 项目结构的脚手架。它可以帮助前端开发者快速构建具有 Redux 数据流的 Polymer 项目，提高开发效率。
本文将详细介绍如何使用 generator-polymer-init-redux，包括安装、使用、配置等内容，并提供示例代码。
安装
在使用前，需要先安装 generator-polymer-init-redux。
可以通过 npm 安装：
npm install -g generator-polymer-init-redux
使用
安装成功后，可以使用以下命令创建一个新的项目：
polymer init redux
然后按照提示操作即可。你需要输入项目名称、作者、描述等信息。
配置
generator-polymer-init-redux 生成的项目结构如下：
-- -------------------- ---- ------- ------------- --- ---- - --- -------- - --- ----------- - --- ---------- - --- --------- - --- ------ - --- -------- - --- ---------- - --- ------------- - --- ---------- --- ---------- --- ------------ --- ---------
其中， app 目录是 Redux 架构的核心。在该目录中，我们可以找到 actions、constants、reducers 和 store 四个子目录。下面分别介绍它们的作用。
actions
actions 目录中包含了 Redux 中的 action。
action 是一个对象，它描述了应用中发生了什么事件。通过调用 store.dispatch() 方法，action 可以触发 state 的改变。action 中一般包含 type 属性和 payload 属性。
例如，下面是一个增加计数器数值的 action：
export const INCREMENT = 'INCREMENT'
export function increment() {
return {
type: INCREMENT
}
}constants
constants 目录中包含了所有的 action type 常量。这样做的好处是避免拼写错误等问题。
下面是该目录的示例代码：
export const INCREMENT = 'INCREMENT' export const DECREMENT = 'DECREMENT'
reducers
reducers 目录中包含了 Redux 中的 reducer。
reducer 是一个函数，它接受两个参数：state 和 action。根据 action 中的 type 属性，reducer 可以决定 state 的变化方式。
下面是一个改变计数器状态的 reducer：
-- -------------------- ---- -------
------ - --------- - ---- --------------
----- ------------ - -
------ -
-
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ----------
------ ----------------- ------ -
------ ----------- - -
--
--------
------ -----
-
-在 reducers 目录中可以添加多个 reducer，它们可以组合在一起形成一个完整的 state 值。
store
store 目录中包含了 Redux 中的 store。
store 是 Redux 的核心，它接受一个 reducer 作为参数，并通过 createStore() 方法创建。store 中包括了三个方法：getState()、dispatch() 和 subscribe()。
下面是一个创建 store 的示例代码：
import { createStore } from 'redux'
import counter from '../reducers'
const store = createStore(counter)在应用中，可以通过 store.dispatch() 方法触发 action 的变化，然后通过 store.subscribe() 方法监听 state 的变化。
示例代码
下面是一个简单的例子，用于介绍如何在 Redux + Polymer 应用中使用 store。
在 index.html 中，我们可以添加一个 button，然后通过 addEventListener() 方法监听 click 事件，当按钮被点击后触发 dispatch() 方法，并传入一个 action 对象：
-- -------------------- ---- -------
----------- ----------------
----------
------- -------------------------- -----------
-----------
--------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
----------- -
---------------------- --------------------------
-
-
----------------------------------- -----------
---------
-------------在 index.js 中，我们可以配置 store 和对应的 reducer：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------- - ---- --------------
----- ------- - ------- ------- -- -
-- ------------ --- ---------- -
------ -
---------
------ ----------- - --
-
-
------ ------
--
----- ----- - -------------------- - ------ - ---
------------------ -- -
------------------------------
---最后，我们需要在 my-element 的 listeners 中添加对应的 dispatch 命令：
<my-element
on-increment="${(e) => store.dispatch({ type: 'INCREMENT' })}"
>
</my-element>当用户点击按钮时，会触发命令，进而触发对应的 action 和 reducer，最终改变 state 的值。
结论
通过使用 generator-polymer-init-redux，我们快速地构建了一个具有 Redux 数据流的 Polymer 应用程序，并且进行了一些简单的数据控制。应用 Redux 以及其相关工具可以极大地简化前端项目的开发，提高代码的可读性和可维护性。
当然，在复杂的项目中，Redux 提供了更多的工具和 API，可以帮助我们更好地控制 state 的变化，以及处理异步操作等问题。
希望本文能够为大家在前端开发中使用 Redux 提供一些帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e681e8991b448d7894