Question

0

198

Views

empty state in next-redux-wrapper

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>
    </>
  )
}

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T02:55:28.763Z

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 })

0

198

empty state in next-redux-wrapper

1 answers

0

Find remote jobs

Andres GPT