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

Question

我正在使用 redux-form，在提交时，我正在尝试将提交的数据传递到另一个页面，我应该使用提交的 redux-form 数据来构建其他东西。 我对 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其他wsie，它将始终是未定义的。 然后，将状态映射到 props 的部分创建一个对象，如下所示：

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