Question

0

201

Visualizações

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 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

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

201

empty state in next-redux-wrapper

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT