reactjs - 在 NextJS 中的 getServerSideProps 中访问 Redux 存储-6ren

reactjs - 在 NextJS 中的 getServerSideProps 中访问 Redux 存储

转载作者：行者123 更新时间：2023-12-04 14:28:10

26

4

我想在 getServerSideProps() 中访问我的 redux 存储；在我的 Next.js 应用程序中。我想拥有存储在 Redux Store 中的用户 ID，以便我可以预加载用户数据。我现在正在使用 next-redux-wrapper 并且在客户端它正在工作。但是当我在 getServerSideProps() 中访问我的商店时，它返回初始状态。我检查了几个例子，但我无法让它工作。
我的configureStore.js

import { createStore, applyMiddleware, compose } from "redux";
import reducer from "./../service";
import thunk from 'redux-thunk'
import { createWrapper, HYDRATE} from 'next-redux-wrapper';

const SET_CLIENT_STATE = 'SET_CLIENT_STATE';

const storeEnhancers = typeof window != 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const makeStore = ({ isServer }) => {

  if (isServer) {

    return createStore(reducer, storeEnhancers(applyMiddleware(thunk)) );

  } else {

      const { persistStore, persistReducer } = require('redux-persist');
      const storage = require('redux-persist/lib/storage').default;

      const persistConfig = {
          key: 'nextjs',
          whitelist: ['userReducer'],
          storage
      };

      const store = createStore(
        persistReducer(persistConfig, reducer),
        storeEnhancers(applyMiddleware(thunk))
      );
  
      store.__PERSISTOR = persistStore(store);

      return store;
  }
};

export const wrapper = createWrapper(makeStore);

export const setClientState = (clientState) => ({
  type: SET_CLIENT_STATE,
  payload: clientState
});

我的_app.js:

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../styles/theme';
import { useStore } from "react-redux";
import { PersistGate } from 'redux-persist/integration/react';
import {wrapper} from './../redux/configureStore';

const MyApp = ({Component, pageProps}) => {
  const store = useStore((state) => state);

  React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Deeltuinen</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
        <PersistGate persistor={store.__PERSISTOR} loading={null}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            <Component {...pageProps} />
          </ThemeProvider>
        </PersistGate>
    </React.Fragment>
  );
}

export default wrapper.withRedux(MyApp);

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired
};

最后是我想获取商店状态的页面:

import React from 'react';
import Layout from './../../components/Layout';
import API from './../../service/api';
import {connect} from "react-redux";
import {wrapper, setClientState} from './../../redux/configureStore';

const AccountSettings = ({data}) => {
 
  return (
    <Layout title="Deeltuinen">
      // User form
    </Layout>
  );
}

export const getServerSideProps = wrapper.getServerSideProps(
  ({store, req, res}) => {
    const state = store.getState();
    console.log(state);

    //const data = await API.getUser(state.userReducer.user.token);
  }
);

export default connect(state => state,{setClientState})(AccountSettings);

最佳答案

我的代码:

export const getServerSideProps = wrapper.getServerSideProps(async ({ req, res, store }) => {
  const state = store.getState();
  console.log('state', state);

  return {
    props: {},
  };
});
`

关于reactjs - 在 NextJS 中的 getServerSideProps 中访问 Redux 存储，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62818195/

26

4

0

文章推荐： WPF 字符串格式={}{0 :N} Error "Expected ' "

文章推荐： sql - 如何编辑具有重复键的行

文章推荐： ios - UICollectionViewCompositionalLayout 不正确的项目大小

reactjs - 我如何在 getServerSideProps 中获取本地存储数据
我正在使用 NextJS 12。我正在尝试获取本地存储对象。当我在 getServerSideProps 中使用 localstorage 时，我收到类似这样的错误 ReferenceError: l
javascript - 如何组合多个 getServerSideProps 包装器？
我在我的 NextJs 应用程序中使用了两个库:next-firebase-auth 和 next-redux-wrapper。它们都需要我用它们各自的函数包装 getServerSideProps。
Next.js:有条件地调用 getServerSideProps
我正在尝试有条件地 SSR 下一页，但在互联网上缺乏类似情况的答案让我相信我对 NextJS 和 SSR 的理解完全不正确，所以我希望得到一些澄清。这是我的理解:在我们的页面文件中导出函数 getS
javascript - 如何为 getServerSideProps 启用缓存？
我们只有很少的页面和组件作为服务器端渲染。我们试图对少数 API 响应使用缓存。 export async function getServerSideProps(context) { con
javascript - NextJS getServerSideProps() 具有多个获取请求
有没有办法在一个 getServerSideProps() 中从多个 API 路由中获取数据？ ? 我有一张表，我需要显示来自多个 MongoDB 集合的数据，并试图弄清楚如何提取这些数据。本质上，
javascript - 是否可以将搜索词参数放入 getServerSideProps() 中？
我正在创建一个页面，我可以在其中概览我的所有笔记/摘要。笔记的页面是转换为动态文件中使用的 HTML 的 markdown 文件(这可行)。在笔记页面(列出所有笔记)，我想实现一个搜索功能: 我需
reactjs - getServerSideProps 访问当前浏览器 url
我正在调用 getServerSideProps 并传入 req 和 res 参数，如下所示: export async function getServerSideProps({ req, res
Next.js - 是否可以调试 getServerSideProps？
您好，按照文档 getServerSideProps是仅在服务器端执行的函数。 export async function getServerSideProps(context) { consol
javascript - 包装 getServerSideProps 抛出异常
我正在尝试包装 getServersideProps使用身份验证处理程序函数，但不断收到此错误:TypeError: getServerSideProps is not a function我的包装看
javascript - NextJS 是否包含仅在包中的 getServerSideProps 中引用的库？
我有一个 Next.js 页面，它在 getServerSideProps() 中从数据库中获取数据(使用 prisma 作为 ORM)。我的工作基于 this example from an of
javascript - Next.js getServerSideProps 加载状态
有没有一种方法可以让我们拥有类似于在 client-side 上获取数据时的加载状态？ ? 我想要一个加载状态的原因是有一个加载骨架之类的东西，例如 react-loading-skeleton在客户
javascript - 如何使用下一个 js 加速 getServerSideProps？
当我在下一个 js 中使用 getServerSideProps 时，页面加载几乎需要 5 或 6 秒。我尝试只使用一个 url 来获取而不是很多，但再次加载页面需要很多时间。 export cons
next.js - 无法导出 `getServerSideProps` 的页面
我想我在这里制造了某种困惑。根据documentation ，如果我想要页面的服务器端渲染(SSR)，我导出异步函数: getServerSideProps 但是，如果我这样做，我将无法构建在本地或
next.js - 您应该如何使用 getServerSideProps 在路由转换时获取客户端数据？
Next.js 9.3 引入 getServerSideProps .在 getInitialProps documentation它现在说: If you're using Next.js 9.3
javascript - Nextjs 中使用 getServerSideProps 进行动态路由
我正在尝试学习nextjs。正在努力解决 getServerSideProps 的路由问题. 使用免费的 API，我在 DOM 上显示了一个国家列表。我想动态链接到一个国家，并为该特定国家获取和显示数
reactjs - Next.js getServerSideProps 始终未定义
我从一个新的 Next 应用程序开始，并尽可能使用功能组件而不是基于类的组件。关注documentation ，我没有运气就设置了以下内容: import React from 'react'; im
reactjs - Next.js getServerSideProps 始终未定义
我从一个新的 Next 应用程序开始，并尽可能使用功能组件而不是基于类的组件。关注documentation ，我没有运气就设置了以下内容: import React from 'react'; im
javascript - Next.js getServerSideProps 显示加载
我正在 pages/post/index.js 中使用 getServerSideProps : import React from "react"; import Layout from "../.
javascript - 如何在下一个 js 中获取完整的浏览器 url，getServerSideProps
现在，我在 http://localhost:3000/，但在产品中我将在不同的 url，例如 http://example.com/，如何在 getServerSideProps 中获取完整的浏览器
javascript - 如何在 nextJS getserversideprops 中使用 firebase
如果有签名用户，我想使用 getServerSideProps 在 Firestore 中获取“示例”文档。下面的代码不起作用。结果是“无法读取”我应该怎么办？或者有其他方法吗？ export con

首页

博学

6Ren·AI

商城

reactjs - 在 NextJS 中的 getServerSideProps 中访问 Redux 存储