Next.js: getServerSideProps with react-redux and redux-persist

Question

I am having a problem with my dispatchers not firing the reducer and not updating the state :

Figured I am not levering getServerSideProps correctly as the docs from next suggest, as well as this blog post.

So before I go down a rabbit hole:

The point of react-redux is to have state anywhere in your app without having to prop-drill, or pass functions to a child to update the parent; And the point of using getServerSideProps, from the next docs:

**

When should I use getServerSideProps?

**

You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration.

That being said am I wrong in thinking this will solve my problem of the redux dispatchers not having the reducer fire:

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 seems to be doing the same thing as mapStateToProps and all the other redux stuff. Could someone help in explaining how this works with redux? Should I just add getServerSideProps to my profile page (that's the page not updating, the actions are not firing ) As I am not sure why certain state in my store is getting updated?

Any help would be appreciated!

Next.js: getServerSideProps with react-redux and redux-persist

0 Answers0