0

我的调度员没有触发减速器并且没有更新状态时遇到问题：

认为我没有按照下一个文档以及这篇博客文章的getServerSideProps建议正确利用。

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

react-redux 的重点是在您的应用程序中的任何地方都有状态，而无需进行 prop-drill 或将函数传递给子级以更新父级；以及使用的要点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到我的个人资料页面（即页面未更新，操作未触发）因为我不确定为什么我的商店中的某些状态正在更新？

任何帮助，将不胜感激！

4

0 回答 0