聆听 Redux Store Polymer 2.0答案

【问题标题】：Listening to Redux Store Polymer 2.0聆听 Redux Store Polymer 2.0
【发布时间】：2018-04-18 16:54:13
【问题描述】：

我正在使用 Polymer 2 开发一个应用程序，并且正在测试 redux 如何使用它来控制数据流。我一直在关注一些简单的例子，并试图产生一个概念证明，我可以使用 redux 存储将一些数据从一个 html 移动到另一个。

当在 html 文件中按下按钮时，我正在运行以下函数：

savePackage() {
  const payload = {"Package Name" : "Integrations", "Description" : "A package for the integrations team"};
  this.dispatch('add', payload);
}

然后，此函数向我的 redux-store.html 发送一个操作，我可以在其中确认我可以通过 console.log 看到该对象。

然后在我的 redux-store.html 中运行以下代码：

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_PACKAGE':
      const payload = action.newdata;
      console.log(payload);
      return Object.assign({}, state, { payload });
  }
};

const store = Redux.createStore(reducer);
const ReduxMixin = PolymerRedux(store);

据我了解（通过在线阅读），我应该能够从另一个名为 data-model.html 的 html 文件访问该数组。此文件中的脚本块如下所示：

class DataModel extends ReduxMixin(Polymer.Element) {
      static get is() { return 'data-model'; }
      static get properties() {
        return {
          payload: {
            type: Array,
            statepath: 'payload'
          }
        };
      }
    }

    customElements.define(DataModel.is, DataModel);

在这个文件的模板标签中，我有以下代码：

<h1>data model [[payload]]</h1>

我相信这应该显示第一个 html 文件中的数组，但它只显示“数据模型”。我试图在 data-model.html 中控制台.log 但似乎 redux 没有从 redux 存储中提取任何数据。

我检查了所有导入路径并检查了拼写错误，但我无法弄清楚为什么这不起作用。任何建议表示赞赏。

【问题讨论】：

您没有发送有效的操作。减少操作需要一个类型参数并且需要是一个对象，或者如果您使用的是 thunk 则需要一个函数。请查看action documentation。摘录：“动作是普通的 JavaScript 对象。动作必须有一个 type 属性来指示正在执行的动作的类型。类型通常应该定义为字符串常量。”
你是否在 mixin 的某个地方有一个名为 add 的方法，该方法将调用转发到 redux 操作以到达 UPDATE_PACKAGE？如果你这样做，你也应该分享那个。如果您不是 @KyleRichardson 所说的，您应该发送类似 this.dispatch({type: 'UPDATE_PACKAGE', newdata: payload}); 的内容
调度操作确实有效（我知道这一点是因为我可以在 redux-store 中使用 console.log 并且对象就在那里）。不起作用的部分是将数据从 redux-store 中拉出
我意识到我没有包含以下在函数中触发调度行时运行的代码： add(payload) { return{ type: 'UPDATE_PACKAGE', newdata: payload } }

标签： javascript reactjs redux polymer polymer-2.x

【解决方案1】：

解决这个问题的方法很简单（我怀疑可能是这样）。在 statePath 上需要大写 P！

无论如何感谢所有帮助

【讨论】：