Question

我尝试在polymer-typescript-starter-kit的基础上整合polymer-redux。我创建了一个分支来尝试polymer-redux-typescript-example。

目标是：

测试ReduxStore yarn tezt 1
测试网络组件yarn test 1
在Polymer元素中使用ReduxStore。 3

1和2适用于我的解决方案。

3我在UI上遇到异常（无法加载资源：http://localhost:8080/redux.js服务器响应状态为404（未找到））

如果我手动添加redux.js，我会遇到另一个例外。

这是我的redux-store.ts：

import {createStore} from "redux";
import {ReduxState, Customer, ReduxAction, ActionType} from "./entities";
// no typings for polymer-redux
import * as PolymerRedux from "../../bower_components/polymer-redux/polymer-redux.js";

export default class ReduxStore {

  static ReduxBehavior: any;

  initialState: ReduxState = {customer: {age: 30, name: 'Polymer Redux'}};

  constructor() {
    const store = createStore(this.appReducer);
    ReduxStore.ReduxBehavior = PolymerRedux(store);
  }

  appReducer = (state: ReduxState, action: ReduxAction) => {
    ...
  }

 ...
}

这是我的my-custom-elem.ts

import {Customer, ReduxAction, ActionType} from "../../scripts/entities";
import ReduxStore from "../../scripts/redux-store";

@component('my-customer-elem')
@behavior(ReduxStore.ReduxBehavior)
class CustomerElem extends polymer.Base {

  // statePath is an extension of Polymer.property - throws transpile exception
  @property({type: Object, statePath: 'customer'} as any)
  customer: Customer;

  ...
}

CustomerElem.register();

这是my-customer-elem.html：

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

<dom-module id="my-customer-elem">
  <template>
    ...
  </template>
</dom-module>

<script>System.import('components/my-customer-elem/my-customer-elem');</script>

在Polymer / Typescript项目中集成Redux

0 个答案: