javascript - Next.js と redux-api を動作させる方法 (next-redux-wrapper を使用)

Question

サーバーサイド レンダリング (SSR) を使用するのに苦労していますredux-api。アプリは、クライアント側レンダリング (CSR) だけで正常に動作します。

SSR が機能するには、Next.js のgetInitialProps関数でデータを利用できるようにする必要があります。私はnext-redux-wrapperそれを一緒にバインドするために使用しようとしています。

現在のステータス：

class ShowLessonPage extends React.Component {

    static async getInitialProps ({store, isServer, pathname, query}) {
        console.log(`getInitialProps`, {store, isServer, pathname, query});
        const { dispatch } = store;
        const lessonSlug = query.lessonSlug;
        // Get one Lesson
        dispatch(reduxApi.actions.oneLesson({ id: `slug=${lessonSlug}` }));
    }

    render() {
        console.log('render', this.props.oneLesson);
        const lesson = this.props.oneLesson.data;
        //...
    }

    //.....

}

const createStoreWithThunkMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(myReduxApi.reducers); // redux-api

const makeStore = function (state, enhancer) {
    return createStoreWithThunkMiddleware(reducer, state);
}

const mapStateToProps = function (state) {
    return { oneLesson: state.oneLesson };
};

// withRedux = next-redux-wrapper
const ShowLessonPageConnected = withRedux({ createStore: makeStore, mapStateToProps: mapStateToProps })(ShowLessonPage)
export default ShowLessonPageConnected;

少なくとも今はstore入りましたが、アプリの CSR (前) バージョンにはなかっgetInitialPropsた奇妙なメッセージが表示されます。そしてもちろん空です。Error: only absolute urls are supportedwithReduxthis.props.oneLesson.data

makeStorestateサーバーで生成された呼び出しで=を取得undefinedしています。おそらくそれが手がかりです。

redux-apiまた、同様に機能する別のものに置き換えることもできます。

更新 1:すべての URL をフルにすることで、Redux が API エンドポイントにヒットするようになりました。ただし、1 ページのリロードではmakeStore3 回以上呼び出しが行われ、最初の呼び出しのみに正しいスラッグが含まれます。コンソール出力を参照してください。

makeStore { state: undefined, reqParams: { lessonSlug: 'tyrannosaurus-rex' } }
getInitialProps { query: { lessonSlug: 'tyrannosaurus-rex' } }
API: GET request: { _id: 'slug=tyrannosaurus-rex' }
makeStore { state: undefined, reqParams: { lessonSlug: 'undefined' } }
getInitialProps { query: { lessonSlug: 'undefined' } }
API: GET request: { _id: 'slug=undefined' }
makeStore { state: undefined, reqParams: { lessonSlug: 'undefined' } }
getInitialProps { query: { lessonSlug: 'undefined' } }
API: GET request: { _id: 'slug=undefined' }

更新 2:ブレークスルー: から promise を返すと、getInitialPropsSSR が機能します。これで、クライアント側のレンダリングがうまく機能し、十分に面白くなりました。

static async getInitialProps ({store, isServer, pathname, query}) {
    const { dispatch } = store;
    const lessonSlug = query.lessonSlug;
    const resultPromise = await dispatch(reduxApi.actions.oneLesson({ id: `slug=${lessonSlug}` }));
    return resultPromise;
}