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）只设置一个道具＆＃34; onChange＆＃34;作为功能。并添加道具以在init上定义值。它就像initValueDuration。

2）设置3个字段的状态

3）添加方法onChange（state）。此方法将调用：this.prop.onChange（this.state）

Answer 2

假设duration, date中有两个州yourReducer。然后，您需要两个函数：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)
    };
}

在yourReducer中，检查操作的类型并更改相应的状态。在日期输入的onChange处理程序中，执行this.props.dateChanged(event.target.value)

结帐redux-thunk

redux mapdispatchtoprops其他组件的状态值

2 个答案: