Question

我正在使用redux-form，并且在提交时，我试图将提交的数据传递到另一个页面，在该页面中，我应该使用提交的redux-form数据来构建其他内容。我是redux领域的新手，但我试图了解reducer和action creator的工作原理。此时，我将提交的数据付诸行动，而在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，否则它将始终未定义。然后将状态映射到道具的部分将创建一个这样的对象：

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,
  }
};

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

1 个答案: