Nextjs - await store.dispatch Cannot read property 'dispatch' of undefined

Question

I'm new to React, Redux and have been following tutorials on the topic. I'm come across a lot of issues that I've been able to resolve but I've come across an issue I can't resolve. I set up store, and can even view it through Chrome's Redux Tools and it show correctly, however when I try and dispatch to the Store, I always get a Cannot read property 'dispatch' of undefined error. I have followed numerous tutorials letter for letter, and am still stuck with the same error message.

Index.Js

import Layout from '../components/layout/Layout';
import Home from '../components/Home';
import { getRooms } from '../redux/actions/roomActions';

import { wrapper } from '../redux/store';

export default function Index() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ req, store }) => {
    await store.dispatch(getRooms(req));
  }
);

roomConstants.js

export const ALL_ROOMS_SUCCESS = 'ALL_ROOMS_SUCCESS';
export const ALL_ROOMS_FAIL = 'ALL_ROOMS_FAIL';

export const CLEAR_ERRORS = 'CLEAR_ERRORS';

reducer.js

import { combineReducers } from 'redux';
import { allRoomsReducer } from './roomReducers';

const reducer = combineReducers({
  allRooms: allRoomsReducer,
});

export default reducer;

Store.js

import { createStore, applyMiddleware } from 'redux';
import { HYDRATE, createWrapper } from 'next-redux-wrapper';
import thunkMiddleware from 'redux-thunk';
import reducers from './reducers/reducers';

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state,
      ...action.payload,
    };
    return nextState;
  } else {
    return reducers(state, action);
  }
};

const initStore = () => {
  return createStore(reducer, bindMiddleware([thunkMiddleware]));
};

export const wrapper = createWrapper(initStore);

roomReducer.js

import {
  ALL_ROOMS_SUCCESS,
  ALL_ROOMS_FAIL,
  CLEAR_ERRORS,
} from '../constants/roomConstants';

// All rooms reducer
export const allRoomsReducer = (state = { rooms: [] }, action) => {
  switch (action.type) {
    case ALL_ROOMS_SUCCESS:
      return {
        roomsCount: action.payload.roomsCount,
        resPerPage: action.payload.resPerPage,
        filteredRoomsCount: action.payload.filteredRoomsCount,
        rooms: action.payload.rooms,
      };

    case ALL_ROOMS_FAIL:
      return {
        error: action.payload,
      };

    case CLEAR_ERRORS:
      return {
        ...state,
        error: null,
      };

    default:
      return state;
  }
};

roomAcion.js

import axios from 'axios';
import absoluteUrl from 'next-absolute-url';

import {
  ALL_ROOMS_SUCCESS,
  ALL_ROOMS_FAIL,
  CLEAR_ERRORS,
} from '../constants/roomConstants';

//Clear errors
export const clearErrors = () => async (dispatch) => {
  return dispatch({
    type: CLEAR_ERRORS,
  });
};

// Get all rooms
export const getRooms = (req) => async (dispatch) => {
  try {
    const { origin } = absoluteUrl(req);

    const { data } = await axios.get(`${origin}/api/rooms`);

    dispatch({
      type: ALL_ROOMS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: ALL_ROOMS_FAIL,
      payload: error.response.data.message,
    });
  }
};

I'm following the same course and having the same issue. Did you find any solution? — zia sultan, Aug 03 '21 at 00:59
Are you using `next-redux-wrapper` v7? If so, does this answer your question: [next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps](https://stackoverflow.com/questions/68638862/next-redux-wrapper-typeerror-nextcallback-is-not-a-function-error-in-wrapper-ge)? — juliomalves, Dec 28 '21 at 19:00

Ayuen Madyt · Answer 1 · 2022-01-22T22:32:26.750

1

in index.js, your getServerSideProps function should read this;

export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => {
 await store.dispatch(getRooms(req));})

edited Jan 22 '22 at 22:32

answered Jan 22 '22 at 22:24

Ayuen Madyt

11
2

score 0 · Answer 2 · answered Dec 28 '21 at 08:11

0

Use the old version of next-redux-wrapper like 6.0.2

answered Dec 28 '21 at 08:11

Jm Figueroa

1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 28 '21 at 08:28

Nextjs - await store.dispatch Cannot read property 'dispatch' of undefined

2 Answers2