Nextjs redux、thunk 和 getInitialProps - 如何实现

Question

我想在我的新项目中使用 nextjs 以及 redux 和 thunk。我想知道如何正确实现所有包。

在我之前的项目中，页面有 HOC 个组件，例如：

import {connect} from 'react-redux';
import Page from './about';
import {fetchUsers} from '../../actions/user';

const mapStateToProps = (state) => {
    const {users} = state;
    return users;
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchUsers: () => dispatch(fetchUsers())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Page);

以及我在 componentDidMount

中实现的获取用户的方法

如何为nexjs实现相同的逻辑？

我做了什么？

已实现商店（基于 _app.js 中的 next-redux-wrapper）
使用 mapStateToProps 创建了 HOC 组件（如下所示）和 mapDispatchToProps

目前我正在考虑以某种方式将 this.props.fetchUsers 方法用于 getInitialProps - 文档说应该使用此方法在渲染站点之前获取数据。

请帮助我正确 redux 实现 nextjs

Answer 1

你可以关注这个example 正确的方法是将商店传递给 getInitialProps 上下文和 App 组件，这样您就可以将它传递给 Provider.

getInitialProps 无法访问组件的实例，这是不可访问的，因此您无法调用 this.props.fetchUsers，但是，因为您正在将存储传递给它的上下文，所以您可以执行 store.dispatch(fetchUsers()) 并从 mapDispatchToProps.

中删除调度

通常我在 getInitialProps 中调度动作，然后在 connect 中将状态映射到道具。

Nextjs redux、thunk 和 getInitialProps - 如何实现

Nextjs redux, thunk and getInitialProps - how to implement

reactjs

redux

redux-thunk

next.js

server-side-rendering