Polymer 2.0中监听Redux Store实现跨HTML数据传递的技术问询

我来一步步帮你搞定Polymer 2 + Redux跨组件传数据的这个功能，其实核心就是把Redux的数据流和Polymer组件打通，咱们从基础配置到组件实现一步步来：

首先得创建你的Redux Store和对应的Reducer，这是数据的“仓库”和处理规则。你可以单独建一个redux-config.js文件：

// 初始状态：咱们用数组来存所有package
const initialState = {
  packages: []
};

// Reducer：纯函数，处理动作并返回新状态
function packageReducer(state = initialState, action) {
  switch(action.type) {
    case 'add':
      // 不要直接修改原状态，用展开运算符生成新对象/数组
      return {
        ...state,
        packages: [...state.packages, action.payload]
      };
    default:
      return state;
  }
}

// 创建Redux Store
const store = Redux.createStore(packageReducer);

// 导出Store，供Polymer组件调用
export default store;

要让所有组件都能访问Store，最简单的方式是在应用根组件（比如my-app.html）里导入Store并挂载到全局，或者通过属性传递给子组件：

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<script type="module" src="./redux-config.js"></script>

<dom-module id="my-app">
  <template>
    <!-- 包含你的触发组件和接收组件 -->
    <package-saver></package-saver>
    <package-list></package-list>
  </template>
  <script>
    import store from './redux-config.js';

    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      connectedCallback() {
        super.connectedCallback();
        // 把Store挂载到全局，方便子组件调用
        window.store = store;
      }
    }
    customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

比如这个组件叫package-saver.html，就是你说的点击按钮执行savePackage的组件，这里要注意你之前的dispatch写法有小问题——Redux的dispatch需要传入一个包含type的动作对象：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="package-saver">
  <template>
    <button on-click="savePackage">保存Package</button>
  </template>
  <script>
    class PackageSaver extends Polymer.Element {
      static get is() { return 'package-saver'; }

      savePackage() {
        const payload = {
          "Package Name": "Integrations",
          "Description": "A package for the integrations team"
        };
        // 触发Redux的add动作，传入完整的动作对象
        window.store.dispatch({ type: 'add', payload });
      }
    }
    customElements.define(PackageSaver.is, PackageSaver);
  </script>
</dom-module>

比如这个组件叫package-list.html，用来展示Store里的packages，核心是订阅Store的状态变化，同步到组件属性：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="package-list">
  <template>
    <h3>已保存的Packages</h3>
    <template is="dom-repeat" items="[[packages]]">
      <div>
        <strong>[[item.Package Name]]</strong>: [[item.Description]]
      </div>
    </template>
  </template>
  <script>
    class PackageList extends Polymer.Element {
      static get is() { return 'package-list'; }
      static get properties() {
        return {
          packages: {
            type: Array,
            value: () => []
          }
        };
      }

      connectedCallback() {
        super.connectedCallback();
        // 订阅Store变化，每次状态更新就同步组件的packages属性
        this.unsubscribe = window.store.subscribe(() => {
          const currentState = window.store.getState();
          this.set('packages', currentState.packages);
        });
        // 初始化时获取一次初始状态
        this.set('packages', window.store.getState().packages);
      }

      disconnectedCallback() {
        super.disconnectedCallback();
        // 组件销毁时取消订阅，避免内存泄漏
        this.unsubscribe();
      }
    }
    customElements.define(PackageList.is, PackageList);
  </script>
</dom-module>

把这几个组件都引入到根组件my-app.html里，运行你的Polymer应用，点击“保存Package”按钮，package-list组件会立刻显示你添加的Package信息，这样就完成了跨HTML文件（跨组件）的数据流传递。

• 如果你想更规范地集成，可以使用polymer-redux库，它提供了connect方法，能自动帮你同步状态和注入dispatch，不需要手动订阅Store。
• 建议把动作类型定义成常量（比如const ADD_PACKAGE = 'add'），避免拼写错误。
• 确保你已经在项目里引入了Redux脚本，比如在index.html里添加<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>。

内容的提问来源于stack exchange，提问作者devAds