Next.js 框架下使用 Redux，遇到的坑与解决方案-JavaScript中文网-JavaScript教程资源分享门户

前言

作为一名前端工程师，在开发过程中我们经常会使用到 React 框架及其生态工具，而 Next.js 作为 React 框架的一种实现，快速地帮助我们搭建了一个完整的服务器渲染应用。

同时，Redux 作为 React 框架的状态管理工具，也成为了众多前端开发者的首选，因为它能够方便地帮助我们管理应用的状态。

在使用 Next.js 框架开发项目中，我们需要通过 Redux 来管理应用的状态。然而，在使用 Redux 和 Next.js 的过程中，我们可能会遇到一些问题。在这篇文章中，将与大家分享在使用 Next.js 框架下使用 Redux 时会遇到的问题和一些解决方案。

问题1：Next.js 服务端渲染中使用 Redux

在使用 Next.js 进行服务端渲染时，我们需要在客户端和服务器端都能够使用 Redux 来管理应用的状态。我们在客户端使用 Redux 非常方便，只需要将 Redux 的 Provider 组件放在应用的最外层即可。但是，服务端渲染中的 Redux 使用则需要我们进行一些额外的配置工作。

首先，我们需要在服务器端做出一些修改，以使服务器端能够使用 Redux。需要在服务端实例化一个 Redux store，并通过 Next.js 提供的 withRedux 方法将其注入到应用中。

// javascriptcn.com 代码示例
// ./pages/_app.js
import React from 'react';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import configureStore from '../store/configureStore';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps, store } = this.props;

    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    );
  }
}

export default withRedux(configureStore)(MyApp);

其中，configureStore 函数是我们在客户端和服务器端都需要使用的 Redux store 配置函数。

// javascriptcn.com 代码示例
// ./store/configureStore.js
import { createStore } from 'redux';
import rootReducer from './reducers';

export const initialState = {};

const configureStore = (state = initialState) =>
  createStore(
    rootReducer,
    state
  );

export default configureStore;

当我们在页面组件中调用 connect 函数连接 Redux 数据时，我们也需要特别注意。因为在服务端渲染中，页面组件只会在页面第一次加载时呈现，所以我们无法使用 connect 函数从 Redux store 中获取数据。这个问题可以通过在页面组件中添加静态方法 getInitialProps 来解决。

// javascriptcn.com 代码示例
// ./pages/index.js
import React from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../store/actions';

class HomePage extends React.Component {
  componentDidMount() {
    const { isPostsFetched, onFetchPosts } = this.props;
    if (!isPostsFetched) {
      onFetchPosts();
    }
  }

  render() {
    const { posts } = this.props;
    return (
      <div>
        {posts.map((post) => (
          <article key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </article>
        ))}
      </div>
    );
  }
}

HomePage.getInitialProps = async ({ store, isServer }) => {
  if (!isServer) {
    return;
  }

  await store.dispatch(fetchPosts());
};

const mapStateToProps = (state) => ({
  posts: state.posts,
  isPostsFetched: state.isPostsFetched,
});

const mapDispatchToProps = (dispatch) => ({
  onFetchPosts: () => dispatch(fetchPosts()),
});

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

问题2：服务端渲染的性能问题

由于使用了服务端渲染，在每次渲染页面时都需要重新进行服务器端渲染，这会导致页面渲染速度变慢。所以我们需要尽可能地优化 Next.js 的服务端渲染。一个比较简单的优化策略是使用缓存机制，将页面的结果缓存在服务器端内存中，下次再次请求同样的页面时，不需要重新进行服务器端渲染。

// javascriptcn.com 代码示例
// ./pages/_app.js
import React from 'react';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import { makeStore, serverSideCache } from '../store/configureStore';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    // 如果已经缓存过页面，直接从缓存中获取结果并返回
    const cached = serverSideCache.get(ctx.req.url);
    if (cached) {
      return cached;
    }

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    const props = {
      pageProps,
      ...await withRedux(makeStore)(ctx).getInitialProps(ctx),
    };

    // 缓存页面结果
    serverSideCache.set(ctx.req.url, props);

    return props;
  }

  render() {
    const { Component, pageProps, store } = this.props;

    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    );
  }
}

export default MyApp;

在本例子中，我们通过 serverSideCache 对象来实现服务器端渲染的缓存机制。在渲染页面的过程中，如果已经存在从客户端过来的相同请求，就可以直接利用服务器端缓存来重用页面组件。这样可以有效地减少网络带宽和服务器端渲染的时间。

问题3：代码分割问题

在使用 Redux 和 Next.js 框架的过程中，我们还需要考虑代码分割的问题。因为围绕 Redux 进行的开发往往会导致代码冗长，使得应用程序的首次加载时间过长。

为了避免这个问题，我们需要懒加载应用程序的代码。在 Next.js 中，我们可以使用 dynamic 函数来完成异步加载组件。

import dynamic from 'next/dynamic';
const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello').then((mod) => mod.Hello),
  { ssr: false }
);

在这个例子中，我们使用 dynamic 函数来懒加载 Hello 组件，以便在客户端中使用应用程序代码。我们还需要设置 { ssr: false }，以避免有关服务器端渲染的潜在问题。

总结

在本文中，我们了解了在使用 Next.js 框架下的 Redux 的过程中可能遇到的问题以及一些解决方案。为了使应用程序更具性能，并且更容易维护，我们可以通过服务端缓存、代码分割以及其他的一些技术手段来优化应用程序的性能。希望这篇文章能够帮助你解决在使用 Next.js 和 Redux 进行开发中可能遇到的一些问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653357a77d4982a6eb6dcc35