CODEWITHSUNDEEP
reactjsreduxreact-reduxaxios
McGrady
McGrady

Reputation: 11477

How to post http request in component and update it?

These days,I'm working with react and redux,but I get stuck with posting http requests,I'm using axios to post http requests,and try many times or demos from the internet.None of them work in my program.I just want to call some APIs and update my components.

And I always got Error TypeError getsimpleresult is not a function,and can't call this function,I know it's just a small case.

Can anyone help me fix it and give me a correct demo.Thanks.

Here is my code:

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

}

Upvotes: 0

Views: 329

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281686

As I can see you are making use of bindActionCreators to bind the action to props as simpleResult however you are directly using the function. I suggest you should be extracting it like

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

also try changing the connect as

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

Upvotes: 1

Jordan Enev
Jordan Enev

Reputation: 18664

Your code example looks good. I guess your path to the actions is wrong:

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

Can you please check the file name simple_reuslt? Here I mean wrong writing of reuslt.

Upvotes: 0

Related Questions