Question

我正在使用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以防万一。我可以查看“产品”的存在/有效性。在渲染，但这种方式违背了getInitialProps的目的。有没有办法用redux实现等效的async / await fetch？

更新确定这可能不起作用。 redux-api-middlewar似乎将一个空对象作为对SSR的动作返回 - 所以它不是时间问题。

Answer 1

确定。阅读一些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()) }
}

Answer 2

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

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

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

2 个答案: