javascript - 是否应该将重新路由包含在一个操作中？

Question

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

在 Mantra (它使用 React 作为前端，使用 Meteor's FlowRouter 作为路由)，我有一个包含 ListItem 的 UI 组件。 .

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

我在想:

1. 添加一个容器并向 props 添加一个 gotoPage 函数，该函数调用 FlowRouter.go .
2. 在 UI 的 onClick 事件中调用 gotoPage。

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

抱歉，我是 Action 游戏新手:)

Answer 1

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

我认为这个问题有很多解决方案，但我会尝试描述我通常做的事情(编写的代码未经测试)。假设您有以下列表项组件 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 })
  }

}

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