Должна ли повторная маршрутизация быть перенесена в действие?

Question

Общий вопрос, с которым я столкнулся, связан с стратегиями разработки: когда и как вызывать действия, а когда нет?

В Mantra (который использует React для его переднего конца и Meteor's FlowRouter для маршрутизации), у меня есть компонент пользовательского интерфейса, содержащий ListItem.

Если я хочу перенаправить на свою страницу в onClick, какова была бы лучшая стратегия?

Я имею в виду:

1. Добавить контейнер и добавить gotoPage функцию props которая вызывает FlowRouter.go.
2. Invoke gotoPage в UI's onClick событие.

Достаточно ли этого, или я должен добавить действие для этого? Я предполагаю, что для того, чтобы действия составляли полный и повторяющийся журнал всех вещей, которые произошли, необходимо создать действие. Было бы крайне важно воспроизвести все, что сделал пользователь. Но в то же время я думаю: использование href без генерации действия кажется ОК. «Воспроизведение» обычно нежелательно, изменение URL-адресов каким-то образом создает действия неявно или есть какая-то другая вещь, которую я не получаю?

Извините, но я новичок в игре действий :)

Answer 1

Edit: Добавлен простой пример, чтобы связать один аргумент функции действия.

Я думаю, что существует множество решений этой проблемы, но я попытаюсь описать, что я обычно делаю (письменный код не проверяется). Допустим, у вас есть следующий компонент элемента списка 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 }) 
    } 

} 

Используя этот шаблон, создайте общую структуру нашего списка. Дайте мне знать, если вы найдете этот шаблон полезным и если у вас есть какие-либо улучшения в моем текущем решении. Вы также можете привязывать аргументы к обработчикам кликов при разработке контейнера (не показано в приведенном выше примере).