NextJS 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で実現する方法はありますか？

更新これは正常に動作しない可能性があります。 redux-api-middlewarは空のオブジェクトをSSRのアクションとして返すように見えるので、タイミングの問題ではありません。

Answer 1

いくつかのGHの問題を読んで私は、SSRでredux-apiミドルウェアを使用することには多少問題があることを発見しました。問題の一部は、非同期/待機で使用できるディスパッチからの約束を返すようには見えないということです。さらに、理想的にはgetInitialPropsをその意図する目的のために使用する必要があります。

私はredux-axios-middlewareに切り替えました。これは魅力的です。

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

Answer 2

あなたは「次Reduxのラッパー」を使用している場合は、makeStoreで初期状態引数を受け入れなければならないし、店を派遣した後、新しい状態は、サーバとクライアント側にづけしになるようCREATESTOREにそれを渡しますオブジェクトメソッド

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