MapDispatchToPros с событием

Question

У меня есть эта часть моего кода:

constructor(props) { 
     super(props) 

     this.state = { 
     symbol: '', 
     side: '', 
     status: '' 
     }; 

     this.onInputChange = this.onInputChange.bind(this); 
     this.onValueChangeSide = this.onValueChangeSide.bind(this); 
     this.onValueChangeStatus = this.onValueChangeStatus.bind(this); 
     this.onFormSelect = this.onFormSelect.bind(this); 
    } 

    onInputChange(event) { 
     this.setState({ symbol: event.target.value }); 
     } 

     onValueChangeSide(event) { 
     this.setState({ side: event.target.value}); 
     } 

     onValueChangeStatus(event) { 
     this.setState({ status: event.target.value}); 
     } 

     onFormSelect(event) { 
     this.props.requestAccountsFilter(this.state.symbol, this.state.side, 

this.state.status); 
    } 

requestAccountsFilter это действие. Его код:

export function requestAccountsFilter(symbol, side, status) { 
    return { 
    type: ACCOUNT_FILTERS, 
    payload: { 
     symbol, 
     side, 
     status 
    } 
    }; 
} 

Этот подход работает нормально.

Кроме того, я хочу создать свой компонент без гражданства, чтобы создать контейнер. Моя проблема в том, что я не знаю, как отправить свое действие с вышеуказанной функциональностью. я пишу это:

const MapDispatchToProps = dispatch => (
    { 
    requestAccountsFilter: (symbol, side, status) => { 
     dispatch(requestAccountsFilter(symbol, side, status)); 
    } 
    } 
); 

, но это не сработало. Как отправить свое действие в MapDispatchToProps?

Answer 1

Цель mapDispatchToProps - фактически не отправлять действия напрямую.

mapDispatchToProps используется для связывания создателей действий с отправкой и передачи этих новых связанных функций в качестве опоры для компонента.

Главное преимущество использования mapDispatchToProps заключается в том, что он делает наш код более чистым путем абстрагирования от метода отправки магазина из компонентов. Поэтому мы можем назвать реквизит, которые являются функции без доступа к отправке, как так

this.props.onTodoClick(id); 

Принимая во внимание, если мы не использовали mapDispatchToProps тогда мы должны пройти отправку отдельно компоненты и диспетчерские действия вроде так:

this.props.dispatch(toggleTodo(id)); 

Вы могли бы использовать mapDispatchToProps, как показано в вашем примере кода, а затем в других местах пишут:

mapDispatchToProps должна быть чистая функция и не может иметь побочные эффекты.

Отправка действий изнутри функции будет считаться побочным эффектом. Функция имеет один или несколько «побочные эффекты», когда оценка функции изменяет состояние вне себя (изменяет глобальное состояние приложения)

Вместо использование жизненного цикла крючков для отправки действий в ответ на проп изменения на компонентах:

class exampleComponent extends Component { 
    componentDidMount() { 
    this.props.fetchData(this.props.id) 
    } 

    componentDidUpdate(prevProps) { 
    if (prevProps.id !== this.props.id) { 
     this.props.fetchData(this.props.id) 
    } 
    } 

    // ... 

}