Передать входное значение через полезную нагрузку реакции-редукса?

Question

export class SearchBar extends React.Component {
  render() {
    return (
      <div>
        <input onChange={this.props.onSearchTermChange} />
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onSearchTermChange: () =>
      dispatch({
        type: "SEARCHTERMCHANGE",
        payLoad: {}
      })
  };
};

В основном, когда изменяется вход, я хочу вызвать действие «onSearchTermChange» и передать значение входа редуктору, но я не знаю, как получить доступ к значению ввода из действия onSearchTermChange.

Answer 1

вы должны использовать event.target.value

<input 
  onChange={ (e) => this.props.onSearchTermChange(e.target.value)} 
  value={this.props.value} 
/>

ваш создатель действия теперь будет

const mapDispatchToProps = dispatch => {
  return {
    onSearchTermChange: (value) =>
      dispatch({
        type: "SEARCHTERMCHANGE",
        payLoad: value
      })
  };
};

и ваш редуктор

case "SEARCHTERMCHANGE":
  return {
    ...state,
    value: action.payLoad
  }

наконец вам нужноимпортируйте свою ценность в ваш реквизит.

const mapStateToProps = (state) => ({
   value: state.value,
})