将 react redux 与 next.js 一起使用

Posted 2023-02-22

【中文标题】将 react redux 与 next.js 一起使用

【英文标题】：Using react redux with next.js

【发布时间】：2019-02-05 07:39:41

【问题描述】：

我尝试将 Redux 与 next.js starter 项目一起使用，并将 next-redux-wrapper 安装到项目中，但我不确定该项目中的根文件在哪里。

我尝试按照next-redux-wrapper 上显示的教程进行操作，但没有成功。没有任何变化。

请帮助我如何将 Redux 添加到项目中。

问候。

【参考方案1】：

首先我使用“npx create-next-app”创建了简单的 next.js 应用

然后我在一个名为“store”的文件夹中创建了通用的 redux 设置。

这是文件夹结构

在页面中我创建了一个 _app.js。里面的代码是这样的——

如果有人在设置方面需要任何帮助，请告诉我...

【讨论】：

无法在 slug 更改时重新获取 redux 中的数据

你必须使用生命周期钩子来实现这个

它在 getServerSideProps 中不起作用

【参考方案2】：

Next.js 使用 App 组件来初始化页面。您可以覆盖它并控制页面初始化。

虽然此演示适用于 next.js，但它应该适用于 nextjs-starter。

安装 next-redux-wrapper：

npm install --save next-redux-wrapper

将_app.js文件添加到./pages目录：

// pages/_app.js
import React from "react";
import createStore from "redux";
import Provider from "react-redux";
import App, Container from "next/app";
import withRedux from "next-redux-wrapper";

const reducer = (state = foo: '', action) => 
    switch (action.type) 
        case 'FOO':
            return ...state, foo: action.payload;
        default:
            return state
    
;

/**
* @param object initialState
* @param boolean options.isServer indicates whether it is a server side or client side
* @param Request options.req NodeJS Request object (not set when client applies initialState from server)
* @param Request options.res NodeJS Request object (not set when client applies initialState from server)
* @param boolean options.debug User-defined debug mode param
* @param string options.storeKey This key will be used to preserve store in global namespace for safe HMR 
*/
const makeStore = (initialState, options) => 
    return createStore(reducer, initialState);
;

class MyApp extends App 

    static async getInitialProps(Component, ctx) 

        // we can dispatch from here too
        ctx.store.dispatch(type: 'FOO', payload: 'foo');

        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : ;

        return pageProps;

    

    render() 
        const Component, pageProps, store = this.props;
        return (
            <Container>
                <Provider store=store>
                    <Component ...pageProps />
                </Provider>
            </Container>
        );
    



export default withRedux(makeStore)(MyApp);

然后，可以简单地连接实际的页面组件： 本演示如何在页面中连接index.js。

import Link from "next/link";
import React from "react";
import 
  Container,
  Row,
  Col,
  Button,
  Jumbotron,
  ListGroup,
  ListGroupItem
 from "reactstrap";
import Page from "../components/page";
import Layout from "../components/layout";

import  connect  from "react-redux";

class Default extends Page 
  static getInitialProps( store, isServer, pathname, query ) 
    store.dispatch( type: "FOO", payload: "foo" ); // component will be able to read from store's state when rendered
    return  custom: "custom" ; // you can pass some custom props to component from here
  
  render() 
    return (
      <Layout>content...</Layout>
    );
  


export default connect()(Default);

有关详细信息，请参阅文档：next-redux-wrapper

【讨论】：

您好，我按照您的说明进行操作，但在“Connect(Index)”的上下文或道具中找不到“store”。要么将根组件包装在 中，要么将“store”作为道具显式传递给“Connect(Index)”。

你安装了 redux 和 react-redux 吗？ createStore函数需要redux，connect函数需要react-redux。

我应该把连接的代码放到 compenents/layout.js 上吗？

这个想法是你可以连接任何组件/页面

从 5.x 升级到 6.x。 App 不应该再用Provider 包裹它的孩子，它现在在内部完成。