0

我面临的一般问题与动作设计策略有关：何时以及如何调用动作以及何时不调用？

在Mantra （其前端使用React和Meteor 的 FlowRouter进行路由）中，我有一个包含ListItem的 UI 组件。

如果我想重新路由到该项目自己的页面onClick，最好的策略是什么？

我在想：

  1. 添加一个容器并添加一个gotoPage调用.propsFlowRouter.go
  2. gotoPage在 UI 的onClick事件中调用。

这是否足够，或者我应该为此添加一个操作？我想为了让动作组成一个完整且可重播的所有已发生事件的日志，必须创建一个动作。为了回放用户所做的所有事情，这将是至关重要的。但同时，我在想：使用href而不产生动作似乎也可以。“可重玩性”通常是不可取的，URL 更改是否以某种方式隐式创建操作，或者还有其他一些我没有得到的东西？

抱歉，我是动作游戏的新手 :)

4

1 回答 1

1

编辑：添加了将单个参数绑定到操作函数的简单示例。

我认为这个问题有很多解决方案，但我会尝试描述我通常做的事情（编写的代码未经测试）。假设您有以下列表项组件components/list_item.js：

import React from 'react';

class ListItem extends React.Component {

  render() {
    const { clickHandler, label } = this.props;
    return <li onClick={clickHandler}>{label}</li>;
  }

}

// add default props and propTypes here...

export ListItem;

和一个列表包装组件components/list.js：

import React from 'react';

import ListItem from './list_item.js';

class List extends React.Component {

  renderItem({ clickHandler, label, arg }) {
    return <ListItem clickHandler={arg ? this.props[clickHandler].bind(this, arg) : this.props[clickHandler]} label={label} />;
  }

  renderList() {
    const { items } = this.props;

    return items.map((item) => {
      return renderItem(item);
    });
  }

  render() {
    return <ul>{this.renderList()}</ul>;
  }

}

// add default props and propTypes here...

export List;

如果我想创建一个新列表，我只需创建一个新容器，如下所示containers/my_list.js：

import List from '../components/list';
import {useDeps, composeWithTracker, composeAll} from 'mantra-core';

export const composer = ({}, onData) => {

  const items = [
    {
      clickHandler: 'goto',
      label: 'Goto document',
      arg: 'MyRoute'
    },
    {
      clickHandler: 'remove',
      label: 'Remove document'
    }
  ];

  onData(null, {items});
};

export const depsMapper = (context, actions) => ({
  goto: actions.myList.goto,
  remove: actions.myList.remove,
  context: () => context
});

export default composeAll(
  composeWithTracker(composer),
  useDeps(depsMapper)
)(List);

例如，此容器链接到以下操作actions/my_list.js：

export default {

  goto({ FlowRouter }, route) {
    FlowRouter.go(route);
  },

  remove({ Collections }, _id) {
    Collections.Documents.remove({ _id })
  }

}

使用这种模式创建我们列表的通用结构。如果您发现此模式有用，以及您对我当前的解决方案是否有任何改进，请告诉我。您也可以在设计容器时将参数绑定到单击处理程序（上例中未说明）。

于 2016-08-02T20:09:28.080 回答