Cannot read property 'dispatch' of undefined
See original GitHub issueI’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:
- Created 5 years ago
- Comments:5
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 argumentasync: true
Here is my commits I did and finally it started working: https://github.com/rajendraarora16/boilerberg/commit/6eb6aab67e6f00d935e060deec99d4b3bdcdc7cb
Thank you!
@rajendraarora16 I think maybe just restart the server.