NextJS Redux,Thunk和getInitialProps-如何实现

reactjs React.js

村村

2020-03-23

我想nextjs在新项目中使用reduxthunk我想知道如何正确实现所有程序包。

在我之前的项目页面中,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

第2700篇《NextJS Redux,Thunk和getInitialProps-如何实现》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小宇宙神奇 2020.03.23

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android