您如何从化简器中的 redux 表单访问值?

Question

我正在尝试从化简器中填写的 redux 表单中获取访问权限，以便我可以将另一个对象的值替换为数组。如何正确提交和传递 redux 表单中的值？

我尝试通过 redux 操作将其传递回去。我尝试直接从商店在减速器中访问它，因为我认为这就是存储它的地方。我觉得我做错了什么

class EditWorkoutItem extends Component {
state = {
open: false
};
// Opens the page
handleClickOpen = () => {
this.props.loadData(this.props.id);
this.setState({ open: true });
};
// Cancels the changes and closes the page
handleClose = () => {
this.setState({ open: false });
};
// Passes back the id to the parent so the correct item can be replaced.
// Passes back the new workout list
handleSubmitChanges = e => {
e.preventDefault();
this.props.editWorkout(this.props.id); // this passes the workouts id back
this.setState({ open: false });
};
render() {
return (
<>
<Button
color="primary"
size="small"
disableRipple
onClick={this.handleClickOpen}
>
edit
</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
style={styles.dialog}
fullScreen
>
<DialogTitle>Edit This Workout</DialogTitle>
<form onSubmit={this.props.handleSubmit} style={styles.form}>
<DialogContent>
<Field
name="date"
component={DatePicker}
format={null}
hintText="Date Of Workout"
fullWidth={true}
locale="en-US"
/>
<Field
name="name"
component={TextField}
floatingLabelText="Workout Name"
style={styles.textfield}
/>
<Field
name="duration"
type="number"
component={TextField}
floatingLabelText="Estimated Duration"
style={styles.textfield}
/>
<FieldArray name="exercises" component={renderExercises} />
</DialogContent>
<DialogActions>
<Button
color="primary"
type="submit"
onClick={this.handleSubmitChanges} //Submitted here
>
Submit Changes
</Button>
<Button onClick={this.handleClose}>Cancel</Button>
</DialogActions>
</form>
</Dialog>
</>
);
}
}

这是减速器：

case "EDIT_WORKOUT":
return (state = {
...state,
workoutlist: state.workoutlist.map(workout => {
// Find the item with the matching id
if (workout.id === action.payload.id) {
// Return a new object
return {
...workout, // copy the existing item
workout: action.values // replace the current workout
};
}
// Leave every other item unchanged
return workout;
})
});

无论我做什么，这些值都不会到达减速器。任何帮助将不胜感激!!

Answer 1

你有没有尝试过使用mapDistchpathToProps在类EditWorkoutItem中调度动作，如下所示：

const connectToRedux = connect(null, 
dispatch => ({
handleSubmitChanges: values => {
// values here is all value of your form
console.log(values);
dispatch({ type: "EDIT_WORKOUT", payload: values }) // dispatch an action with
// type is EDIT_WORKOUT and payload is all value of Redux-form
}
})
)

以表格呼叫handleSubmitChanges：

<form onSubmit={this.props.handleSubmitChanges} style={styles.form}>
...
...
<Button
color="primary"
type="submit"
// onClick={this.handleSubmitChanges} // remove this
>

现在，在 reducer 中，您可以从类型为EDIT_WORKOUT的动作创建者获取操作数据：

case "EDIT_WORKOUT":
console.log(action.payload) // You can receive values of Redux-form here
return;