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)
    }
  }

  // ...

}