question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot read property 'dispatch' of undefined

See original GitHub issue

I’m trying the same example, but I’m getting an error in the index.js

import React, {Component} from "react";
import {connect} from "react-redux";

class Page extends Component {
    static getInitialProps({store, isServer, pathname, query}) {
        store.dispatch({type: 'FOO', payload: 'foo'}); // component will be able to read from store's state when rendered
        return {custom: 'custom'}; // you can pass some custom props to component from here
    }
    render() {
        return (
            <div>
                <div>Prop from Redux {this.props.foo}</div>
                <div>Prop from getInitialProps {this.props.custom}</div>
            </div>
        )
    }
}

export default connect()(Page);

_app.js

import React from "react";
import {createStore} from "redux";
import {Provider} from "react-redux";
import App, {Container} from "next/app";
import withRedux from "next-redux-wrapper";

const reducer = (state = {foo: ''}, action) => {
    switch (action.type) {
        case 'FOO':
            return {...state, foo: action.payload};
        default:
            return state
    }
};

const makeStore = (initialState, options) => {
    return createStore(reducer, initialState);
};

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {

        // we can dispatch from here too
        ctx.store.dispatch({type: 'FOO', payload: 'foo'});

        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

        return {pageProps};

    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }

}

export default withRedux(makeStore)(MyApp);

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
rajendraarora16commented, Sep 30, 2018

I figured out yesterday, after updating the next-redux-saga I was getting those error. However, after doing research I found with newest version have to pass an argument async: true

Here is my commits I did and finally it started working: https://github.com/rajendraarora16/boilerberg/commit/6eb6aab67e6f00d935e060deec99d4b3bdcdc7cb

Thank you!

1reaction
sersoongcommented, Sep 30, 2018

@rajendraarora16 I think maybe just restart the server.

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue.js - cannot read property 'dispatch' of undefined in Vuex
It could have something to do with the build process / transpiler. If use is actually a static method of the Vue class,...
Read more >
"TypeError: Cannot read property 'dispatch' of undefined" - vuex
I am new to Vuex it might be related to object not exporting properly or may be I don't know how to dispatch...
Read more >
[FIXED] TypeError: Cannot read property dispatch of undefined
Fix: TypeError: Cannot read property dispatch of undefined. ▶️ Say "Hello ‍♂️" to me On: Facebook : https://fb....
Read more >
Cannot read property 'dispatch' of undefined VueJS-Vue.js
Try changing onRegionClick to use arrow function so that this.$store.dispatch makes reference to the top-level object. onRegionClick: (element, code ...
Read more >
Cannot read properties of undefined (reading 'dispatch')
in my actions.js I think this line is failing: this.$store.dispatch("auth/" + USER_ACTION, response.data.user); I did originally write it like this: this.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found