re-routingをアクションにラップする必要がありますか？

Question

私が直面している一般的な質問は、アクションデザイン戦略と関連しています。いつ、どのように行動を呼び出すのか、そうでない場合は？

（フロントエンドにはReact、ルーティングにはMeteor's FlowRouter）、私はListItemを含むUIコンポーネントを持っています。

onClickのアイテムのページにリピートしたい場合は、何が最善の戦略でしょうか？

私は考えています：

1. コンテナを追加し、FlowRouter.goを呼び出すpropsにgotoPage機能を追加します。
2. UIのonClickイベントでgotoPageを呼び出します。

これで十分ですか、これに対応する必要がありますか？私は、行動が起こったすべてのものの完全かつ再生可能なログを構成するようにするためには、アクションが作成されなければならないと想像します。ユーザーが行ったすべてのことを再生することは重要です。しかし、同時に、私は思っています：hrefを使用してアクションを生成せずにOkでも同様です。 「再生可能性」は一般的に望ましくないのですが、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 }) 
    } 

} 

このパターンを使用すると、リストの一般的な構造が作成されます。このパターンが有用で、私の現在の解決策が改善されているかどうかを教えてください。コンテナを設計する際には、クリックハンドラに引数をバインドすることもできます（上記の例では図示していません）。