首页 文章

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

提问于
浏览 次
0

我正在使用Next.js并希望使用redux预取API项 . 这里有一些几乎可以工作的代码：

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


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

我遇到了组件在 getProduct 之前呈现的问题 . 我如何塑造东西，以便在调度取出物品之前我不会渲染？我正在使用redux-api-middleware以防万一 . 我可以在渲染中检查'product'的存在/有效性，但这种方法违背了 getInitialProps 的目的 . 有没有办法用redux实现等效的async / await fetch？

Update 好的，这可能不起作用 . redux-api-middlewar似乎返回一个空对象作为对SSR的一个动作 - 所以它不是一个时间问题 .

reactjs redux next.js

2 回答

  • 0

    好 . 阅读一些GH问题我发现在SSR中使用redux-api-middleware有些问题 . 我认为问题的一部分是它似乎没有返回可以与async / await一起使用的dispatch的promise . 另外，理想情况下应该使用 getInitialProps 作为预期目的，所以让我们直接返回那里的道具 .

    我已经切换到redux-axios-middleware，它就像一个魅力 .

    static async getInitialProps ({ store }) {
  await store.dispatch(fetchProducts())
  return { products: getProducts(store.getState()) }
}
    回复于
  • 2

    如果使用'next-redux-wrapper'，则必须接受makeStore中的initialState参数并将其传递给createStore，以便在调度存储之后，可以在对象方法中的服务器和客户端访问新状态 .

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

相关问题