Проблема с вызовом функции редуктора для изменения состояния

Question

Так что я должен пропустить шаг при вызове функции редуктора из redux с использованием mapDispatchToProps, но я не знаю, что это такое.

это код редуктора

    case "CHANGE_COMPLETED":
      return (state = {
        ...state,
        ...state.selectedWorkout.exerciselist.map(exercise => {
          if (exercise.id === action.payload.id) {
            return {
              ...exercise,
              sets: exercise.sets.map((set, setIdx) => {
                if (setIdx === action.payload.setIdx) {
                  return {
                    ...set,
                    completed: true
                  };
                }
                return set;
              })
            };
          }
          return exercise;
        })
      });

thisэто код действия:

export const changeCompleted = id => setIdx => ({
  type: "CHANGE_COMPLETED",
  payload: { id, setIdx }
});

import { connect } from "react-redux";
import { changeCompleted } from "../../actions";

class StartExercise extends Component {
  state = {
    timerOpen: false
  };

  closeTimer = () => {
    this.setState({ timerOpen: false });
  };

  isCompleted = setIdx => {
    this.setState({ timerOpen: true });
    //Here is where i try to call the function
    this.props.changeCompleted(this.props.exercise.id, setIdx);
  };

  render() {
    const { exerciseName, sets } = this.props.exercise;
    const { timerOpen } = this.state;
    return (
      <>
        <h1>{exerciseName.toUpperCase()}</h1>
        <List>
          <ListItem disableGutters>
            <Paper style={styles.paper}>
              {sets.map((set, setIdx) => (
                <Grid
                  container
                  spacing={2}
                  alignItems="center"
                  justify="center"
                  key={setIdx}
                >
                  <Grid item style={styles.item}>
                    <b>Set {setIdx + 1}:</b>
                  </Grid>
                  <Grid item style={styles.item}>
                    {set.weight} lbs
                  </Grid>
                  <Grid item style={styles.item}>
                    {set.reps} reps
                  </Grid>
                  <Grid item style={styles.item}>
                    <Checkbox
                      onChange={() => this.isCompleted(setIdx)}
                      disabled={
                        setIdx === 0 ||
                        (setIdx !== 0 && sets[setIdx - 1].completed === true)
                          ? false
                          : true
                      }
                      color="primary"
                    />
                  </Grid>
                </Grid>
              ))}
            </Paper>
          </ListItem>
        </List>
        {/* <Drawer anchor="bottom" open={timerOpen}>
          <Timer closeTimer={this.closeTimer} />
        </Drawer> */}
      </>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    changeCompleted: id => setIdx => dispatch(changeCompleted(id, setIdx))
  };
}

export default connect(
  null,
  mapDispatchToProps
)(StartExercise);

Итак, из отладки я знаю, что он делает это внутри функции isCompleted, но на самом деле он не вызывает там this.props.changeCompleted

это не сообщение об ошибке вообще, и у меня есть догадка, я просто пропускаю шаг в вызове и отправке функции здесь.

Любая помощь будет принята с благодарностью!

Answer 1

Ваш вызов функции:

this.props.changeCompleted(this.props.exercise.id, setIdx);

Сигнатура функции:

id => setIdx => dispatch(changeCompleted(id, setIdx))

Поэтому, когда вы вызываете функцию, вы получаете функцию обратно:

setIdx => dispatch(changeCompleted(id, setIdx))

То есть вы ничего не отправляете

Answer 2

Если вы объявите об отправке, как это. Когда вы вызываете функцию, вы должны выполнить как Язык программы карри

function mapDispatchToProps(dispatch) {
  return {
    changeCompleted: id => setIdx => dispatch(changeCompleted(id, setIdx))
  };
}

Выполнить функцию как Curry:

this.props.changeCompleted(this.props.exercise.id)(setIdx)

Итак, вы должны изменить mapDispatchToProps Понравилось:

function mapDispatchToProps(dispatch) {
  return {
    changeCompleted: (id, setIdx) => dispatch(changeCompleted(id, setIdx))
  };
}

Позвоните по вашему делу:

this.props.changeCompleted(this.props.exercise.id, setIdx)

Редактируйте Измените действие так:

export const changeCompleted = (id, setIdx) => ({
  type: "CHANGE_COMPLETED",
  payload: { id, setIdx }
});