4

我一直无法让我的 nextjs 应用程序与 getServerSideProps() 一起使用以进行服务器端的 rednering。我尝试实现 next-redux-wrapper 但状态为空。

*注意：redux 在客户端运行时工作正常，但现在我试图获取状态getServerSideProps()并将其传递给组件，因此它在服务器上呈现。

空状态

商店.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

减速器.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>
    </>
  )
}
4

1 回答 1

0

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)

减速器.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
    }
}

商店.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 })
于 2021-12-11T10:05:52.297 回答