Javascript 如何让Next.js和reduxapi正常工作（使用Next redux包装器）

我正在努力使用服务器端渲染（SSR）。该应用程序只需客户端渲染（CSR）即可正常工作

为了让SSR工作，我需要在Next.js'

getInitialProps

函数中提供数据。我试着用它把它绑在一起

当前状态：

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

存储到

getInitialProps

中，但我遇到了一个奇怪的

错误：只有绝对URL受支持

消息，而我的CSR（pre-

withRedux

）版本的应用程序中没有这些消息。当然，

这个.props.onelessource.data

是空的

makeStore

正在服务器生成的调用上获取一个

状态

=

未定义

，这可能是一个线索

我也愿意用类似的东西来替换

reduxapi

更新1:通过使所有URL都变满，Redux现在正在命中我的API端点。但是，对于1页重新加载，它调用

makeStore

不少于3次，并且只有第一次调用包含正确的slug，请参阅控制台输出：

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:一个突破：从

getInitialProps

返回承诺使SSR工作。现在客户端渲染出现了问题，非常有趣

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;
}

---

经过一整天的拉扯，我终于解决了这个问题

在它发挥应有的作用之前，有许多问题：

绝对网址。仅客户端代码与相对URL没有问题，但服务器有问题

getInitialProps

必须返回对结果的承诺（见下文）

我的数据对象（

onelessource

）最终位于

this.state

，而不是

this.props

，正如我所预期的那样（对于我的用例，只要我能够在服务器和客户端上呈现它，我就不在乎）

以下是

getInitialProps

的最终版本：

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;
}

下面是Next.js、redux api和Next redux包装器协调工作的完整示例：