How to issue a store dispatch in axios promise

Question

I am learning React. I thought this will be a very simple task but I am stuck in issuing a dispatch on the store after axios promise is complete.

This is the source code of my entire class.

Inside the promise, the value of store is undefined. I have tried a lot of combinations. In Angular I can just define a class variable and can use it. What should I do here?

class CricketScorer extends Component {

    constructor(props, context) {
    super(props, context);

    const { store } = this.context;
    this.isLoading  = false;
    }

    componentDidMount() {

    console.log('Get Initial State from Server');

    axios.get(jsonURL)
        .then((response) => {
        console.log('axios.get SUCCESS', response.data);
        console.log('componentDidMount Value Of Store', this.store);
        this.store.dispatch({
            type:       constants.INITIAL_STATE,
            payload:    response.data
            });

        })
        .catch(error => {
        console.log('axios.get ERROR', error);
        });
    }

    render() {
    console.log('Cricketscorer render()', this.store)

    // This function always recieve single argument [this.props]
    // All other passed values are as "this.props.recipes"
    return (
        <div>
        <ScoreBoard />
        <ScoreAction />
        {this.isLoading === true && <span>Loading...</span>}
        </div>
    );
    }
}

The console output is:

Navigated to http://localhost:3000/
Cricketscorer render() undefined
Scoreboard state Object {matchId: 0, thisOver: Array(0), prevOver: Array(0), oversTotal: 0, teamBatting: Object…}
Get Initial State from Server
axios.get SUCCESS Object {matchId: 100, thisOver: Array(0), prevOver: Array(0), oversTotal: 0, teamBatting: Object…}
componentDidMount Value Of Store undefined
axios.get ERROR TypeError: Cannot read property 'dispatch' of undefined

As you can see I am trying to issue a dispatch and it is giving me error there saying:

axios.get ERROR TypeError: Cannot read property 'dispatch' of undefined

Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Andy Ray, Jun 26 '17 at 21:28
this.context.store.dispatch ? isn't your store coming from context? — Kev, Jun 26 '17 at 22:35
@Amida Thanks it worked. But is there a way to assign this.context.store to some variable and then use it throughout the component. — Sallu, Jun 27 '17 at 04:21
This is a personal opinion: if you are new to React, which is focused on the View layer, adding Redux at the same time, which focuses on app state, is probably making your life harder. Your questions are more "basic" JS knowledge. Like how "this" and the data encapsulated in an ES6 class can be accessed. "Context" is a special React feature that allows data to be passed along the whole component tree but it is not recommended to use as end user. Redux uses it under the hood. Have a read at this post from Redux developer: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 — Kev, Jun 27 '17 at 08:37

score 0 · Accepted Answer · answered Jun 27 '17 at 06:57

So the variables declared within the constructor are not available with the this keyword since it the constant or variable is not belonding to the React Component content.

However you can assign it like

constructor(props, context) {
    super(props, context);

    this.store  = this.context.store;
    this.isLoading  = false;
}

and later access it with this.store anywhere in your component just as you do with isLoading

How to issue a store dispatch in axios promise

1 Answers1