empty state in next-redux-wrapper

Question

i've been having troble getting my nextjs app to work with getServerSideProps() for server-side-rednering. i tried implemening next-redux-wrapper but the state is empty.

*note: redux works fine while it was running on client side, but now im trying to get the state in getServerSideProps() and pass it into the component, so it renders on the server.

store.js:

const reducer = combineReducers({
    productList: productListReducer,
    categoryList: categoryListReducer,
})

const middleware = [thunk]

const makeStore = context => createStore(reducer, composeWithDevTools(applyMiddleware(...middleware)))

const wrapper = createWrapper(makeStore, {debug: true})

export default wrapper

reducer.js:

export const productListReducer = (state = { products: [] }, action) => {
    switch (action.type) {
        case HYDRATE:
            return {...state, ...action.payload}
        case 'PRODUCT_LIST_REQUEST':
            return { loading: true, products: [] }
        case 'PRODUCT_LIST_SUCCESS':
            return { loading: false, products: action.payload }
        case 'PRODUCT_LIST_FAIL':
            return { loading: false, error: action.payload }
        default:
            return state
    }
}

_app.js:

import wrapper from '../redux/store'

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

export default wrapper.withRedux(MyApp)

index.js:

import wrapper from '../redux/store'

export const getServerSideProps = wrapper.getServerSideProps(store => ({req, res}) => {
  const state = store.getState()
  const { products } = state.productList

  return {props: {products: products}}
})


export default function Home({products}) {

  return (
    <>
      <div>{products}</div>
    </>
  )
}

Answer 1

page.js:

const mapDispatchToProps = (dispatch) => {
return {
  listProducts: bindActionCreators(listProducts, dispatch),
  listCategories: bindActionCreators(listCategories, dispatch)
}

}

function mapStateToProps(state) {
    return {
        products: state.productList.products,
        loading: state.productList.loading,
        categories: state.categoryList.categories,
        loadingCategory: state.categoryList.loading
    }
}

CategoryScreen.getInitialProps = wrapper.getInitialPageProps((store) => async () => {
    await store.dispatch(listProducts())
    await store.dispatch(listCategories())
})
  
export default connect(mapStateToProps, mapDispatchToProps)(CategoryScreen)

reducer.js:

import { HYDRATE } from "next-redux-wrapper"

export const categoryListReducer = (state = { categories: [] }, action) => {
    switch (action.type) {
        case HYDRATE:
            return {...state, ...action.payload}
        case 'CATEGORY_LIST_REQUEST':
            return { loading: true, categories: [] }
        case 'CATEGORY_LIST_SUCCESS':
            return { loading: false, categories: action.payload }
        case 'CATEGORY_LIST_FAIL':
            return { loading: false, error: action.payload }
        default:
            return state
    }
}

store.js:

const combinedReducer = combineReducers({
productList: productListReducer,
categoryList: categoryListReducer
})

const reducers = (state, action) => {
    if (action.type === HYDRATE) {
      const nextState = {
        ...state,
        ...action.payload
      }
      return nextState
    } else {
      return combinedReducer(state, action)
    }
}
const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension')
    return composeWithDevTools(applyMiddleware(...middleware))
  }
  return applyMiddleware(...middleware)
}

export const makeStore = (context) => {
  const store = createStore(reducers, bindMiddleware([thunk]))
  return store
}

export const wrapper = createWrapper(makeStore, { debug: true })