Next.js: getServerSideProps с помощью react-redux и redux-persist

Question

У меня проблема с диспетчерами, которые не запускают редуктор и не обновляют состояние:

Подумал, что я не нажимаю getServerSidePropsправильно, как предлагают документы из следующего, а также это сообщение в блоге.

Итак, прежде чем я пойду в кроличью нору:

Смысл response-redux в том, чтобы иметь состояние где угодно в вашем приложении без необходимости поддерживать детализацию или передавать функции дочернему элементу для обновления родителя; И смысл использованияgetServerSideProps, из следующих документов:

**

Когда мне следует использовать getServerSideProps?

**

Вы должны использовать getServerSideProps только в том случае, если вам нужно предварительно отрисовать страницу, данные которой должны быть получены во время запроса. Время до первого байта (TTFB) будет медленнее, чем у getStaticProps, потому что сервер должен вычислять результат по каждому запросу, а результат не может быть кэширован CDN без дополнительной настройки.

При этом я ошибаюсь, думая, что это решит мою проблему диспетчеров redux, не имеющих огня редуктора:

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { Switch, Route, Redirect, withRouter } from 'react-router-dom';

import LinkNavWithLayout from './LinkNavWithLayout';
import Index from './home';
import Profile from './profile';
import Dashboard from './dashboard';
import ForgotPassword from './forgotPassword';
import UpdatePassword from './updatePassword';
import Login from './login';
import Confirmation from './confirmation';
import Register from './register';

class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const { isLoggedIn, accountNotVerified } = this.props;
    let navBars = [
      { name: 'Home', path: '/' },
      { name: 'Profile', path: '/profile' },
      { name: 'Dashboard', path: '/dashboard' },
      { name: 'Log in', path: '/login' },
      { name: 'Register', path: '/register' }
    ];

    function PrivateRoute({ children, ...rest }) {
      return (
        <Route
          {...rest}
          render={({ location }) =>
            isLoggedIn && !accountNotVerified ? (
              { ...children }
            ) : (
              <Redirect
                to={{
                  pathname: '/',
                  state: { from: location }
                }}
              />
            )
          }
        />
      );
    }

    return (
      <>
        <Switch>
          <Route
            path="/"
            isLoggedIn={isLoggedIn}
            exact
            render={props => (
              <LinkNavWithLayout {...props} data={navBars}>
                <Index />
              </LinkNavWithLayout>
            )}
          />

          <PrivateRoute path="/profile" isLoggedIn={isLoggedIn}>
            <LinkNavWithLayout data={navBars}>
              <Profile user />
            </LinkNavWithLayout>
          </PrivateRoute>

          <PrivateRoute path="/dashboard" isLoggedIn={isLoggedIn}>
            <LinkNavWithLayout data={navBars}>
              <Dashboard />
            </LinkNavWithLayout>
          </PrivateRoute>

          <Route
            path="/login"
            render={props => <Login accountNotVerified={accountNotVerified} {...props} />}
          />


          <Route path="/register" render={props => <Register {...props} />} />

          <Route
            component={({ location }) => (
              <h1>
                Sorry but the page{' '}
                <p style={{ fontWeight: 'strong' }}>{location.pathname.substring(1)} </p>{' '}
                Page, Could Not be found
              </h1>
            )}
          />
        </Switch>
      </>
    );
  }
}

export async function getServerSideProps() {
     var {isLoggedIn, accountNotVerified} = this.props
  return { props: { isLoggedIn, accountNotVerified } }; // will be passed to the page component as props
}

function mapStateToProps(state) {
  var { users } = state;
  var { isLoggedIn, accountNotVerified } = users;

  return { isLoggedIn, accountNotVerified };
}

export default withRouter(connect(mapStateToProps)(App));

getServerSideProps похоже, делает то же самое, что и mapStateToPropsи все остальные сокращения. Может ли кто-нибудь помочь объяснить, как это работает с redux? Я должен просто добавитьgetServerSideProps на страницу моего профиля (страница не обновляется, действия не запускаются). Поскольку я не уверен, почему определенное состояние в моем магазине обновляется?

Любая помощь будет оценена по достоинству!