Uncaught TypeError: this.props.getData не является функцией - PullRequest
Новая
       4

Uncaught TypeError: this.props.getData не является функцией

0 голосов
/ 06 мая 2020

Невозможно вызвать функцию внутри компонента, предоставленного Redux.

Это мой компонент контейнера 

export class HomeContainer extends React.Component {
    render() {
        return(
            <Home 
                getData={ this.props.getData }
            />
        )
    }
}

const mapStateToProps = state => {
    return state;
}

const mapDispatchToProps = dispatch => {
    return bindActionCreators({
        getData: getCountriesList.getCountriesByISO
    }, dispatch);
}

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

Я вызываю эту функцию redux внутри компонента, используя 

componentDidMount() {
        this.props.getData();
    }

Это мое действие 

export function getCountriesByISOData() {
    return (dispatch) => {
        dispatch(toggleLoading(true));
        return fetch('/api/countries', {
            method: 'GET',
        }).then(res => {
            if(res.status === 200) {
                return res.json().then(res=> {
                    console.log(res)
                    dispatch(toggleLoading(false));
                    dispatch(isSuccess(res));
                })
            } else {
                dispatch(toggleLoading(false));
                dispatch(isError(res.statusText));
            }
        }).catch(error => {
            dispatch(toggleLoading(false));
            dispatch(isError(error));
        })
    }
}

и это мой редуктор 

let defaultState = {
    isLoading: false,
    data: [],
    error: ''
}

const getCountriesByISOReducer = (state=defaultState, action) => {
    if(action.type === 'COUNTRIES_ISO_TOGGLE_LOADING') {
        return {
            ...state,
            isLoading: action.isLoading
        }
    }
    if(action.type === 'COUNTRIES_ISO_IS_ERROR') {
        return {
            ...state,
            error: action.error
        }
    }
    if(action.type === 'COUNTRIES_ISO_IS_SUCCESS') {
        return {
            ...state,
            data: [...state.data, action.success]
        }
    }
    return state;
}

export default getCountriesByISOReducer;

Это мой root редуктор 

export default combineReducers({
    globalConfirmedCases: globalConfirmedCasesReducer,
    dailyStatsByDate: getDailyStatsByDateReducer,
    dailyStats: getDailyStatsReducer,
    getCountriesByISO: getCountriesByISOReducer,
    getCountriesStats: getCountriesStatsReducer
});

Что я здесь делаю не так? Существуют ли какие-либо соглашения об именах при написании редюсеров и действий и их использовании в контексте реакции?

...