Доступ к хранилищу Redux в getServerSideProps в NextJS - PullRequest
Новая
       75

Доступ к хранилищу Redux в getServerSideProps в NextJS

0 голосов
/ 09 июля 2020

Я хочу получить доступ к моему хранилищу redux в getServerSideProps (); в моем приложении Next. js. Я хочу иметь идентификатор пользователя, который я храню в Redux Store, чтобы я мог предварительно загрузить данные пользователя. Сейчас я использую next-redux-wrapper, и на стороне клиента он работает. Но когда я обращаюсь к своему магазину в 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);

1 Ответ

0 голосов
/ 10 июля 2020

Мой код: 

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

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