Question

我的调度员无法解雇reducer and not updating the state时遇到了问题：

想到我没有像下一个建议中的docs以及this blog post那样正确地利用getServerSideProps。

所以在我掉进兔子洞之前：

react-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东西一样。有人可以帮忙解释一下Redux的工作原理吗？我是否应该只将getServerSideProps添加到我的个人资料页面（即该页面未更新，操作就不会触发），因为我不确定为什么商店中的某些状态正在更新？

任何帮助将不胜感激！

Next.js：带有react-redux和redux-persist的getServerSideProps

0 个答案: