在 NextJS getInitialProps 中调用调度时访问 redux 状态

Question

我正在使用 Next.js 并想使用 redux 预取一个 API 项目。这是一些几乎可以工作的代码：

class Thing extends Component {
  static getInitialProps ({ store }) {
    store.dispatch(fetchProduct())
  }
}


const mapStateToProps = (state, ownProps) => {
  return {
    product: getProduct()
  }
}

我运行遇到组件在 getProduct 有信息之前呈现的问题。我怎样才能塑造事物，以便在 dispatch 取回物品之前不渲染？我正在使用 redux-api-middleware 以防万一。我可以在渲染中检查 'product' 的 existence/validity，但这有点违背了 getInitialProps 的目的。有没有办法用 redux 实现相当于 async/await 的抓取？

更新好的，这可能行不通。 redux-api-middlewar 似乎 return 一个空对象作为对 SSR 的操作 - 所以它不是时间问题。

Answer 1

好的。阅读一些 GH 问题我发现在 SSR 中使用 redux-api-middleware 有点问题。我认为部分问题在于 return 似乎没有可以与 async/await 一起使用的 dispatch 承诺。此外，理想情况下，应该将 getInitialProps 用于其预期目的，因此让我们直接 return 那里的道具。

我已经切换到 redux-axios-middleware，它非常有效。

static async getInitialProps ({ store }) {
  await store.dispatch(fetchProducts())
  return { products: getProducts(store.getState()) }
}

Answer 2

如果您正在使用 'next-redux-wrapper'，您必须在 makeStore 中接受 initialState 参数并将其向下传递给 createStore，这样在分派存储后，新状态将可以在对象方法的服务器端和客户端访问。

const makestore = initialState => {
  return createStore(reducer, initialState);
};

在 NextJS getInitialProps 中调用调度时访问 redux 状态

Accessing redux state when dispatch called in NextJS getInitialProps

reactjs

redux

next.js