是否應該將重新路由包裹到一個動作中？

Question

我面臨的一般問題與行動設計策略有關：什麼時候以及如何調用動作？何時不行？

在Mantra（其使用用於路由React其前端和Meteor's FlowRouter），我有一個包含ListItem的UI組件。

如果我想重新路由到onClick中的項目自己的頁面，最好的策略是什麼？

我想到的是：

1. 添加一個容器中，添加一個gotoPage功能props它調用FlowRouter.go。
2. 在UI的onClick事件中調用gotoPage。

這是否夠用，還是應該爲此添加一個操作？我想，爲了讓行動組成一個完整的可重複記錄所有發生的事情，必須創建一個行動。爲了回放用戶所做的所有事情將是至關重要的。但與此同時，我在想：使用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 }) 
    } 

} 

使用此模式可以爲我們的列表創建一個通用結構。如果您發現此模式有用，並且您對我的當前解決方案有任何改進，請告知我們。您可以在設計容器時將參數綁定到點擊處理程序（在上面的示例中未示出）。