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