React redux 提交并使用下一页提交的数据表单

Question

我正在使用 redux-form 并且在提交时我试图将提交的数据传递到另一个页面，在那里我应该使用提交的 redux-form 数据来构建其他东西。 我对 redux 领域很陌生，但我试图了解减速器和动作创建器的工作原理。 在这一点上，我正在将提交的数据付诸行动，并且在 reducer 中，有效负载是未定义的。 那么我怎样才能有正确的提交表单流程->调度一个动作->将数据传递到reducer->将数据获取到下一页。

这是我的 redux 形式：

<form method="POST" action="/" autoComplete="off" noValidate onSubmit={handleSubmit(handleSubmitData)}>
  {initialFields.map((key, index) => {
      return (
          <Field key={index} label={key} name={key} component={renderTextField} />
      );
  })}
     <Button type="submit" disabled={submitting} size="small" variant="contained" color="primary"> Submit </Button> {/* onClick={submitting ? submitting : reset } */}
    <Button type="button" disabled={pristine || submitting} size="small" onClick={reset} variant="contained" color="secondary"> Clear Values </Button>
</form>

出口：

function mapStateToProps({ form }) {
  return form;
}

    export default connect(mapStateToProps)(reduxForm({
      form: "swimForm",
      validate,
      asyncValidate,
    })(SwimForm));

行动：

export const getSwimFormValues = (props) => async dispatch => {
  console.log("From Action",props)
  dispatch({
    type: SUBMIT_SWIM_FORM,
    payload: props.values
  });
};

和减速机：

const initialState = {
    values: []
  };

  export default function(state = initialState, action) {
    switch (action.type) {
      case SUBMIT_SWIM_FORM:
          console.log("From Reducer", action,)
        return { 
          ...state, 
          values: payload
        };


      default:
        return state;
    }
  }

Answer 1

首先，确保将payload更改为action.payload否则它将始终未定义。 然后你 map state 到道具的部分创建一个 object 像这样：

const mapStateToProps = state => {
  // make sure that the name of the property with form values is actually `form`
  // you can log the state and see what exactly you need to assign
  console.log(state);
  return {
    form: state.form,
  }
};