Question

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

在DialogResult（其前端使用Mantra，路由使用React）中，我有一个包含Meteor's FlowRouter的UI组件。

如果我想在onClick中重新路由到该项目的页面，那么最佳策略是什么？

我在想：

添加容器并向gotoPage添加props函数，调用ListItem。
在用户界面的gotoPage活动中调用onClick。

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

抱歉，我是动作游戏的新手：）

Answer 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 })
  }

}

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

应该将重新路由包装成一个动作吗？

1 个答案: