小编Vin*_*t P的帖子

我有点想到如何实现一个reducer,其实体可以有相同类型的子.

让我们以reddit注释为例:每个注释都可以有子注释,可以自己注释等等.为了简化原因,注释是类型的记录{id, pageId, value, children},pageId是reddit页面.

如何为减速机建模？我正在考虑让reducer成为一个map - > id的注释,你可以使用它来逐页过滤pageId.

问题是,例如当我们想要为嵌套的注释添加注释时:我们需要在地图的根上创建记录,然后在父子属性中添加其id.要显示我们需要获取所有这些注释的所有注释,请过滤掉我们在顶部的那些注释(例如,将它们作为orderedList保存在页面reducer中)然后迭代它们,从注释对象获取时我们遇到使用递归的孩子.

有没有比这更好的方法或有缺陷？

我刚刚开始使用flux(现在使用redux),我想知道如何处理关系.
举个例子,我们可以使用Trello,它有包含卡的列的板.

一种方法是为板子安装一个存储/减速器,并在其中包含所有数据,但这意味着一些非常胖的存储,因为它们必须包含列和卡的所有操作.

我见过的另一种方法是将嵌套资源分成例如BoardStore,ColumnStore和CardStore,并使用它们的id作为参考.

这是一个我有点困惑的例子:你可以有一个名为addCard的动作创建者向服务器发出请求,创建一张包含所有数据的卡片.如果您正在进行乐观更新,您之前会在您的某个商店中创建一个卡片对象,但在您收到请求之前,您无法知道它将具有的ID.

简而言之:

• 点击addCard
• addCard会发出请求,同时返回ADD_CARD_TEMP类型的操作
• 您收到请求并返回ADD_CARD类型的操作,其中存储/缩减器更改ID.

有没有推荐的方法来处理这个案子？嵌套的存储/缩减器对我来说看起来有点傻,但是否则你最终会得到非常复杂的存储,所以它看起来真的很妥协.

从ts-loader问题复制粘贴,因为它可能更合适:

如何将打字稿源图传递给babel,以便结束源图指向原始文件而不是编译的打字稿？

这是我的开发设置示例:

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "jsx": "react",
    "noImplicitAny": false,
    "sourceMap": true
  },
  "exclude": ["node_modules", "gulpfile.js", "webpack.config.js", "server.js"]
}

webpack.dev.js:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  devtool: "eval",
  entry: [
    "webpack-hot-middleware/client",
    "./src/app/index",
  ],
  output: {
    path: path.join(__dirname, "build"),
    filename: "app.js",
    publicPath: "/static/"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
      'window.fetch': 'exports?self.fetch!whatwg-fetch'
    })
  ],
  resolve: {
    extensions: ['', '.ts', '.tsx', '.js']
  },
  module: {
    noParse: [
      /\/sinon.js/
    ],
    preLoaders: …

我正在尝试为Flummox编写类型定义，但我不完全理解应该如何编写它。要点是我们应该对 Store、Actions 和 Flummox 类进行子类化，并将它们传递给函数。
以下是包含操作的代码示例：

import { Flummox, Actions, Store } from 'flummox';
class MessageActions extends Actions {
  newMessage(content: string) {
    return content;
  }
 }
class MessageStore extends Store {
   constructor(flux: Flummox) {
   super();

   const messageActions: MessageActions = flux.getActions('messages'); // error here
   this.register(messageActions.newMessage, this.handleNewMessage);
  }
 }

 class Flux extends Flummox {
   constructor() {
     super();

     this.createActions('messages', MessageActions);
     this.createStore('messages', MessageStore, this); //error here
   }
 }

我开始的定义是：

/// <reference path="eventemitter3.d.ts"/>

declare module "flummox" {

  type ActionId = string;

  class Store { …

我正在使用Webpack进行应用程序和测试(使用https://github.com/webpack/karma-webpack).该应用程序使用打字稿和Babel中的测试.

在测试中从独立模块导入某些东西(使用import { cleanHTML, fromHTML, toHTML } from "../../app/utils/text.ts";,即我需要提及.ts扩展名,否则失败).

当我实际尝试导入一个导入另一个文件中的组件的React组件时,我收到以下错误: Module not found: Error: Cannot resolve 'file' or 'directory' ./blocks/paragraph.

目录树看起来像:

src/
  app/
    components/
      blocks/
        paragraph.ts
    main.ts
  tests/
    components/
       main_tests.js
    utils/

而main.ts像这样导入了paragraph.ts import { ParagraphBlockComponent } from "./blocks/paragraph";

正常编译工作但不测试.这是业力配置:

var path = require('path');

module.exports = function (config) {

config.set({
    basePath: 'src',
    singleRun: true,
    frameworks: ['mocha', 'chai'],
    reporters: ['dots'],
    browsers: ['Firefox'],
    files: [
        'tests/index.js'
    ],
    preprocessors: {
        'tests/index.js': ['webpack']
    },
    webpack: {
        noInfo: true,
        module: { …