Как разместить http-запрос в компоненте и обновить его?

Question

В эти дни я работаю с react а также redux, но я застрял с размещением http запросов, я использую axios отправлять http-запросы и пробовать много раз или демонстрации из Интернета. Ни одна из них не работает в моей программе. Я просто хочу вызвать некоторые API и обновить мои компоненты.

И я всегда получаю ошибку TypeError getsimpleresult is not a functionи не могу вызвать эту функцию, я знаю, это просто маленький случай.

Может кто-нибудь помочь мне исправить это и дать мне правильную демонстрацию. Спасибо.

Вот мой код:

reducers.js

const initState = {
    simple_result_value: {}
};

export default function simple_result_reduce(state = initState, action) {
    switch (action.type) {
        case 'query_evaluation_simple_result':
            return {
                ...state,
                simple_result_value: action.simple_result_value
            };
        default:
            return state;
    }
}

action.js

const simpleresultaction = (data) => ({
    type: 'GET_VALUE',
    result_value: data
});


export const getsimpleresult = () => async(dispatch, getState) => {
    try {
        let response = await post_http("/some/api", params);
        await dispatch(simpleresultaction(response.data))
    } catch (error) {
        console.log('HTTP post error: ', error)
    }
};

component.js

import React, {PropTypes, Component} from 'react'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as simpleActions from '../actions/simple_reuslt'

@connect( state => state,dispatch => bindActionCreators({simpleActions}, dispatch) )
export default class Simple_result_component extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.getsimpleresult();
    }

    render() {
        return (
            <header className="header">
            </header>
        )
    }

}

Answer 1

Как я вижу, вы используете bindActionCreators привязать действие к реквизиту как simpleResult однако вы напрямую используете функцию. Я предлагаю вам извлечь его как

componentWillMount() {
        this.props.simpleActions.getsimpleresult();
    }

также попробуйте изменить connect как

@connect(state => (state), dispatch => ({simpleActions: bindActionCreators(simpleActions, dispatch)})) 

Answer 2

Ваш пример кода выглядит хорошо. Я думаю, ваш путь к действиям неверен

import * as simpleActions from '../actions/simple_reuslt'

Можете ли вы проверить имя файла simple_reuslt? Здесь я имею в виду неправильное написание reuslt.