Reactjs 访问NextJS中getServerSideProps中的Redux存储_Reactjs_Redux_React Redux_Next.js

Reactjs 访问NextJS中getServerSideProps中的Redux存储

reactjs redux next.js

Reactjs 访问NextJS中getServerSideProps中的Redux存储,reactjs,redux,react-redux,next.js,Reactjs,Redux,React Redux,Next.js,我想访问getServerSideProps中的redux存储；在我的Next.js应用程序中。我想将用户id存储在Redux存储中，以便可以预加载用户数据。我现在正在使用下一个redux包装器，在客户端它正在工作。但是当我在getServerSideProps中访问我的存储时，它返回初始状态。我检查了几个例子，但我不能让它工作 My configureStore.js import { createStore, applyMiddleware, compose } from "red

我想访问getServerSideProps中的redux存储；在我的Next.js应用程序中。我想将用户id存储在Redux存储中，以便可以预加载用户数据。我现在正在使用下一个redux包装器，在客户端它正在工作。但是当我在getServerSideProps中访问我的存储时，它返回初始状态。我检查了几个例子，但我不能让它工作

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

我的代码：

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

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

我的代码：

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

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

如果需要将一些参数传递给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
}

如果需要将一些参数传递给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
}

getServerSideProps几乎是在页面被点击时运行的前几个函数之一，因此它如何包含除redux的intialState之外的任何其他状态？我使用redux persist来保存页面之间的存储。我将用户id存储在要在getServerSideProps中使用的Redux存储中。默认情况下，Redux persist将Redux状态存储在localStorage中，localStorage是一种浏览器实现，因此在服务器端不可用。除非您手动实现了一些东西来持久化状态服务器端，否则它将无法工作。那么，获取用户id并使用用户数据创建服务器端呈现页面的最佳策略是什么呢？getServerSideProps几乎是在页面被点击时运行的前几个函数之一，那么，除了redux的initialState之外，它如何包含任何其他状态呢？我正在使用redux persist在页面之间保存存储。我将用户id存储在要在getServerSideProps中使用的Redux存储中。默认情况下，Redux persist将Redux状态存储在localStorage中，localStorage是一种浏览器实现，因此在服务器端不可用。除非您手动实现了一些东西来持久化状态服务器端，否则它将无法工作。那么，获取用户id并使用用户数据创建服务器端呈现页面的最佳策略是什么？我正在获取初始存储状态，没有我以前存储的值。@Emke你找到解决方案了吗？我正在获取初始存储状态，没有我以前存储的值。@Emke你找到解决方案了吗？