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？

我该怎么办？

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

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

请帮助我正确redux实施nextjs

Answer 1

您可以按照以下示例进行操作 ，正确的方法是将存储传递到getInitialProps上下文和App组件，以便将其传递到Provider。

将getInitialProps不能访问到组件的情况下，这是无法访问的，所以你不能打电话this.props.fetchUsers，但是，因为你是路过商店的情况下，你可以做store.dispatch(fetchUsers())和删除调度mapDispatchToProps。

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