Next.js使用Redux时action creator未向store分发数据如何解决？

核心问题原因 #

你在getServerSideProps中调用的getPosts是异步方法，你通过.then处理回调但没有等待异步逻辑执行完成就直接返回了属性，此时dispatch还未执行，你读取到的store状态就是初始的空值。

修复代码 #

1. 修正getServerSideProps异步逻辑 #

把getServerSideProps改为异步函数，用await等待接口请求和dispatch执行完成后再返回状态：

export const getServerSideProps = async () => {
  const reduxStore = initializeStore()
  const { dispatch } = reduxStore
  // 等待异步请求完成再执行后续逻辑
  const posts = await getPosts()
  console.log(posts)
  dispatch(initializeArticles(posts))

  return { props: { initialReduxState: reduxStore.getState() } }
}

export default Home

2. 修复reducer隐藏问题 #

你当前APPROVECOMMENT分支存在两处错误：直接修改原state对象、返回值错误，会导致后续状态更新异常，修正如下：

case 'APPROVECOMMENT':
  return state.map((article) => {
    if (article.id === action.articleId) {
      // 返回全新对象，不修改原state
      return {
        ...article,
        commentIsApproved: true
      }
    }
    // 未匹配的文章保留原有状态，不要强行修改为false
    return article
  })

其他验证点 #

• 确认根组件正确使用Provider包裹，且将useStore(initialReduxState)返回的store传入Provider
• 确认rootReducer中已经正确注册了articlesReducer，对应的状态key和你取值时的key一致

内容的提问来源于stack exchange，提问作者obash