How do you access the values from a redux form in a reducer?

问题

I am trying to get access from the redux form that is being filled out inside my reducer so I can replace the values of another object to an array. How do you properly submit and pass the values from a redux form?

I have tried passing it back through the redux actions. I've tried accessing it in the reducer directly from the store because I figured that's where it's being stored. I feel like I am doing something simple wrong

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>
      </>
    );
  }
}

this is the reducer:

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

No matter what I do, the values are not getting to the reducer. Any help would be seriously appreciated!!!

回答1:

Have you ever try to use mapDistchpathToProps to dispatch action in Class EditWorkoutItem like this:

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
       }
   })
)

Call handleSubmitChanges in form:

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

Now, in reducer you can get data in action from action creator with type EDIT_WORKOUT:

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

来源：https://stackoverflow.com/questions/58478786/how-do-you-access-the-values-from-a-redux-form-in-a-reducer