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

1bqhqjot 于 2023-06-29 发布在 React

关注(0)|答案(5)|浏览(143)

我想在getServerSideProps（）中访问我的redux存储;在我的Next.js应用程序中。我想有我在Redux商店中存储的用户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
});

My _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);

reactjs

来源：https://stackoverflow.com/questions/62818195/access-redux-store-in-getserversideprops-in-nextjs

5条答案

按热度按时间

uqjltbpv1#

密码：

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

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

赞(0）回复(0）举报 2023-06-29

yruzcnhs2#

您可以使用cookie存储auth凭据，然后使用request cookie访问它的服务器端

赞(0）回复(0）举报 2023-06-29

pvabu6sv3#

无法从服务器端访问驻留在浏览器端的本地存储。您需要找到一种方法，根据您的请求将其传递到服务器。通过URL参数或Cookie。或者，如果您想使用服务器端会话存储（库将使用cookie来跟踪您的会话），请选中此链接;
https://nextjs.org/docs/pages/building-your-application/routing/authenticating
如果cookie只是一个用于关联服务器会话对象的令牌，并且多个服务器在LB后面运行而没有粘性会话配置，则需要进行会话复制。

赞(0）回复(0）举报 2023-06-29

4c8rllxm4#

你可以使用iron-session来做你想要做的事情，并将你的会话中的用户数据存储在Redux中。Check the NextJS example。

import type { IronSessionOptions } from 'iron-session'

type User = {
  isLoggedIn: boolean
  login: string
  avatarUrl: string
}

export const sessionOptions: IronSessionOptions = {
  password: process.env.SECRET_COOKIE_PASSWORD as string,
  cookieName: 'iron-session/examples/next.js',
  // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
  cookieOptions: {
    secure: process.env.NODE_ENV === 'production',
  },
}

// This is where we specify the typings of req.session.*
declare module 'iron-session' {
  interface IronSessionData {
    user?: User
  }
}

// In your pages
import { InferGetServerSidePropsType } from 'next'
import { withIronSessionSsr } from 'iron-session/next'

export default function SsrProfile({
  user,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <Layout>
      {user?.isLoggedIn && <pre>{JSON.stringify(user, null, 2)}</pre>}
    </Layout>
  )
}

export const getServerSideProps = withIronSessionSsr(async function ({
  req,
  res,
}) {
  const user = req.session.user

  if (user === undefined) {
    res.setHeader('location', '/login')
    res.statusCode = 302
    res.end()
    return {
      props: {
        user: { isLoggedIn: false, login: '', avatarUrl: '' } as User,
      },
    }
  }

  return {
    props: { user: req.session.user },
  }
},
sessionOptions)

赞(0）回复(0）举报 2023-06-29

ttcibm8c5#

如果您需要向getServerSideProps传递一些参数，则应设置页面结构来执行此操作。
示例：
如果我需要从一个用户那里获得一些信用，并且我的API需要“userId”参数，我会像这样设置我的页面：

pages/credits/[userId].js

这样，我就可以通过以下方式访问getServerSideProps函数中的userId参数：

export async function getServerSideProps (context) {

   const { userId } = context.params
   
   ...
   // API call to get the Credits by userId
}

赞(0）回复(0）举报 2023-06-29

我来回答

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

5条答案

相关问题

热门标签

最新问答