1

I am getting error in Next js while I am dispatching the action from index.js file

enter image description here

The main issue is with this function getServerSideProps, if i comment this function error gone, i don't understand what is the issue in this function

index.js file

import Layout from "../components/layout/Layout"
import Home from "../components/Home"

import { wrapper } from "../services/store"
import { getRooms } from '../services/actions/roomsAction'

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

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

_app.js file

import '../styles/globals.css'
import { wrapper } from '../services/store'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default wrapper.withRedux(MyApp) 

Store.js file

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





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

    return applyMiddleware(...middlware)
}

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, bindMiddlware([thunkMiddleware]))
}

export const wrapper = createWrapper(initStore)

How can I solve this problem?

1

1 Answer 1

1

if you are using next-redux-wrapper version 6.0.2 or previous then it works well. To install version 6.0.2 you need to uninstall the latest version by typing "npm uninstall next-redux-wrapper" then reinstall next-redux-wrapper by typing "npm uninstall [email protected]".

the other way is: in the latest version, you have to write like these :

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

instead of :

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.