redux mapdispatchtoprops状态其他组件的值

Question

这个问题可能很愚蠢，但是由于某种原因，我找不到想要的东西。我有一个具有两个输入的组件，如果任何输入更改，我必须向Saga派遣一个操作以从后端找到一些信息，因此我已经发送了这两个值。当我以新值派遣的一个组件中更改值并将其设置在Redux Store中时，要将请求发送到后端，我需要在Redux Store中已设置的其他输入值，我应该如何执行此操作？

以下是组件和用户酶，我想要更改功能中的持续时间和日期值。

export class Options extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <SelectField
          name={"duration"}
          value={this.props.duration}
          onChange={this.props.durationChanged}
        >
          <MenuItem key={1}  value={1} primaryText={"option1"} />
          <MenuItem key={2}  value={2} primaryText={"option2"} />
          <MenuItem key={3}  value={3} primaryText={"option3"} />
          <MenuItem key={4} value={4} primaryText={"option4"} />
        </SelectField>
        <DatePicker
          value={this.props.date}
          onChange={this.props.dateChanged}
        />
      </div>
    );
  }
}
const mapStateToProps = createStructuredSelector({
  date: makeSelectDate(),
  duration: makeSelectDuration(),
});
function mapDispatchToProps(dispatch, a, b) {
  return {
    dispatch,
    dateChanged: (any, date) => {
      dispatch(changeDate(date));
      //I want other duration value to dispatch an action to backend
    },
    durationChanged: (event, index, value) => {
      dispatch(changeDuration(value));
      //I want other date value to dispatch an action to backend
    }
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(Options);

Answer 1

我想，您需要做：

1）仅将一个" on Change"设置为函数。并添加道具以定义初始化的值。就像InitvalueDuration一样。

2）用3个字段设置状态

3）添加方法Onchange（状态）。此方法将调用：this.prop.onchange（this.state）

Answer 2

说您在yourReducer中有两个状态duration, date。然后，您需要两个功能：durationChanged, dateChanged。

function durationChanged(newDuration) {
    return (dispatch: Redux.Dispatch<any>, getState: () => RootState) => {
        dispatch({
            type: "DURATION_CHANGED",
            payload: newDuration
        });
        const date = getState().yourReducer.date;
        yourAsyncCallToTheBackEnd(newDuration, date);
        ...
    }
}
function dateChanged(newDate) {
    return (dispatch: Redux.Dispatch<any>, getState: () => RootState) => {
        dispatch({
            type: "DATE_CHANGED",
            payload: newDate
        });
        const duration = getState().yourReducer.duration;
        yourAsyncCallToTheBackEnd(duration, newDate);
        ...
   }
}

在您的mapDispatchToProps中，您添加

function mapDispatchToProps(dispatch: Redux.Dispatch<any>, ownProps: any): any{
    return {
        durationChanged: (newValue) => durationChanged(newValue),
        dateChanged: (newValue) => dateChanged(newValue)
    };
}

在您的雷达克中，您检查了操作的类型并更改相应的状态。在您的Onchange of Date Input中，您进行this.props.dateChanged(event.target.value)

结帐redux-thunk