Next.js中用redux connect给getServerSideProps传state报错如何解决？

你出现Error: Objects are not valid as a React child (found: [object Promise])报错的核心原因是：

• connect是React Redux提供的组件包装函数，只能接收React组件作为参数，你把服务端异步函数getServerSideProps传给了connect，最终导出的是一个Promise对象而非React组件，渲染时自然会报Promise对象不能作为React子元素的错误。

其他逻辑误区 #

• getServerSideProps是Next.js专属的服务端生命周期函数，仅在服务端运行，和客户端的Redux、connect逻辑完全隔离，它的入参是Next.js的请求上下文对象（包含req、res、路由参数等），永远不可能拿到Redux的state作为入参。
• 你写的mapStateToProps用法也不符合规范：mapStateToProps本身会自动接收Redux的state作为第一个入参，不需要手动调用store.getState()，且返回值是直接要注入组件的props对象，不需要额外套一层props字段。

正确实现方案 #

你要实现「在getServerSideProps中读取Redux状态」的需求，next-redux-wrapper是官方推荐的可行方案，你之前未实现成功是写法有误，参考正确写法如下：

import { connect } from 'react-redux'
import { wrapper } from '../redux/store' // 需使用next-redux-wrapper导出的wrapper实例创建store
import Product from '../components/Product'

// getServerSideProps用wrapper包裹即可拿到服务端store实例
export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (ctx) => {
    const { products, loading } = store.getState().productList
    return {
      props: { products, loading }
    }
  }
)

function Home({ products, loading, userInfo }) {
  return <Product products={products} loading={loading} />
}

// 若还需要注入客户端的Redux状态，正常用connect包装组件即可
const mapStateToProps = (state) => {
  return {
    userInfo: state.user.info
  }
}

export default connect(mapStateToProps)(Home)

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