Как установить состояние в Redux из компонента, передающего полезную нагрузку?

Question

Я не могу установить состояние с помощью mapDispatchToProps и передать полезную нагрузку

Импорт:

import React, { Component } from 'react';
import classes from './HoursWatched.mod ule.css';
import axios from 'axios';
import { connect } from 'react-redux';
import * as actionType from '../../../store/actions';

Вот как я пытаюсь вызвать действие:

   componentDidMount() {
        this.getHoursWatched()
    }

    getHoursWatched() {
        axios.get(API_URL, header)
            .then((res) => {
                console.log(res)
                this.props.hoursWatched(res)
            })
            .catch((err) => {
                console.log("Error", err)
            })
    }

mapDiscpatchToProps:

const mapDispatchToProps = dispatch => {
    return {
      hoursWatched : (res) => dispatch({ type: actionType.HOURS_WATCHED, payload: res })
    }
  }

Экспорт:

export default connect(mapStateToProps, mapDispatchToProps)(HoursWatched);

В редукторе:

const reducer = (state = initialState, action, payload) => {
    switch (action.type) {
        case actionTypes.HOURS_WATCHED:
            const newHoursWatched = {};
                console.log(payload) //This is undefined
            return {
                ...state,
                hoursWatched: newHoursWatched
            };

Почему я не могу передать полезную нагрузку? Он говорит, что он не определен

Answer 1

Вы пытаетесь сослаться на неверный аргумент в редукторе. Чтобы получить доступ к полезной нагрузке, которую вы передаете из ответа API, вам нужно использовать action.payload в редукторе вместо payload.