next-redux-wrapper 中的空状态

Posted 2023-02-19

【中文标题】next-redux-wrapper 中的空状态

【英文标题】：empty state in next-redux-wrapper

【发布时间】：2021-11-18 09:11:32

【问题描述】：

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

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

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

【问题讨论】：

我也有同样的问题。关于这个问题的任何更新？

@Afsanefda 我使用 getInitialProps 和 next-redux-wrapper 让它工作

感谢您的回复。如果可以的话可以上传代码吗？

有什么消息吗？？我仍然面临这个问题。

@Afsanefda 嗨，我发布了对我有用的答案。

【参考方案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 )

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。