response redux pass this.props для действий от компонента

Question

В моем классе компонентов у меня есть this.props, который содержит history объект, который содержит transitionTo функции.

render() { 
    console.log(this.props) 

    return (
     <div> 
     <button onClick={actions.myAction}>My button</button> 
     </div> 

Вот моя кнопка вызова myAction, который когда завершается хочет маршрут в другое место. Я хочу, чтобы получить доступ к этой функции transitionTo в моей action и выполняет что-то вроде router.transitionTo("/page1")

Для этого я должен получить history объект, который содержит transitionTo функцию. Итак, как я могу передать объект this.props.history действиям. Когда я onClick={actions.myAction(this.props.history)} моя кнопка не вынесенное ..

Любая помощь

Answer 1

Я не согласен с вашим подходом, но найти сильфонные решение вашей проблемы:

handleBtnClick() { 
    actions.MyAction(this.props.history); 
} 

render() { 
    return (
    <div> 
     <button onClick={ this.handleBtnClick.bind(this) }>My button</button> 
    </div> 
); 
} 

Когда кнопка нажата функция handleBtnClick(), и вы можете вызвать свое действие и передать любой реквизит, который вы хотите.

onClick ожидает выражение функции (то, что оценивает выражение функции). Вы не должны делать сложные звонки там, например, actions.myAction(this.props.history).

Я предлагаю вам использовать react-router-redux и обрабатывать переходы по URL-адресам, используя routeActions и настраиваемое промежуточное ПО промежуточного уровня. Я могу расширить этот подход, если вы заинтересованы.

EDIT:

Если вы используете react-router-redux, то вы должны воспользоваться методами в routeActions. Метод, который вам нужен в этом случае, - push(). Итак, если вы хотите перейти на URL-адрес /user/account, вы просто вызываете dispatch(routeActions.push('/user/account')), а реакция-маршрутизатор-редукция будет обрабатывать переход.

Например:

import { routeActions } from 'react-router-redux'; 

// Action creator  
function mySuperAction(flag) { 
    return (dispatch, getState) => { 
    dispatch(routeActions->push('/user/account')); 
    } 
}); 

Вы должны иметь свой магазин правильно настроена с среагировать-маршрутизатор-Redux для того, чтобы это работало.

Или из компонента:

import { routeActions } from 'react-router-redux'; 
import { connect } from 'react-redux'; 
import React from 'react'; 

class MyComponent extends React.Component { 
    handleClick() { 
    this.props.dispatch(routeActions.push('/user/account')); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={ this.handleClick.bind(this) }>My button</button> 
     </div> 
    ); 
    } 
} 
export default connect()(MyComponent); 

Answer 2

ответы выше правильно, но падают Appart при переходе на "Stateless Components" этой быстро разваливается. Мое предложение использует функцию более высокого порядка, чтобы позаботиться о том, чтобы предотвратить предотвращение действия по умолчанию по клику и предоставление правильных аргументов. Если вы уже используете ES2015 (через Бабель, например), это может быть это просто:

const preventDefault = (fn, ...args) => (e) => { 
    e.preventDefault(); 
    fn(...args); 
}; 

Тогда в ваших компонентах называют так:

const Item = ({ 
    item, 
    openItem 
}) => (
    <div> 
    <h1>{item.title}</h1> 
    <a href="#" onClick={preventDefault(openItem, item)}>Open Item</a> // on click will call `openItem(item)`. 
    </div> 
)