在NextJS中調用dispatch時訪問redux狀態getInitialProps

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有點問題。我相信這個問題的一部分是，它似乎沒有返回可用於異步/等待的調度許諾。此外，理想情況下，您應該使用getInitialProps作爲其預期目的，所以讓我們直接返回道具。

我已經切換到redux-axios-middleware，它的功能就像一個魅力。

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

Answer 2

如果您正在使用「下一個終極版的包裝器」，你必須在makeStore接受的初始化狀態參數，並把它傳遞到createStore使調度店裏後的新狀態將在服務器和客戶端在入店對象方法。

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