Reactjs redux saga/可加载组件第一次提取未等待，但所有后续提取都已等待

我不能做一个合适的服务器端

当我启动我的服务器并获取时，例如

http://localhost:3000/last-电影发行

第一次提取不是由

toPromise（）

等待的。但是我接下来做的所有其他的都很好，服务器端就可以了

下面是我的代码片段。我在类构造函数中分派redux操作。（就像每个人一样）

这是正常行为吗？

附：我的故事是从一个

fork

开始，然后是一个

fork

和一个

呼叫开始的。一模一样

我想知道我是否错过了某个地方的回程

/***********************************************
***************** UPDATE BELOW *****************
***********************************************/

我给你我的传奇（只有两个）

我向您展示我的行动地点；）

。。。
类电影扩展组件{
建造师（道具）{
超级（道具）；
this.state={isSlideShowOpened:false}；
const movie=props.app.movie.results.filter（e=>e.id==Number（props.match.params.movieId））；
如果（movie.length==0）{
props.fetchMovie（props.match.params.movieId）；//服务器端渲染有一个很大的警告lol
@loadable/component强制您拆分每个路由的代码，并最终使用回退（下载js包时使用微调器）

让我提醒您，@loadable/component是市场上唯一能够为服务器端渲染lol执行拆分代码的模块

好吧，@loadable/component不会等待你的传奇故事。我没有其他选择，我想这对谷歌和必应来说也没那么糟糕。。。
例如，我的react路由器看起来像这样

import React from 'react';
import loadable from '@loadable/component';
import Loading from './Exception/Loading';

const Home = loadable(() => import('./Home/index'), { fallback: <Loading /> });
const Movies = loadable(() => import('./Movies/index'), { fallback: <Loading /> });
const Movie = loadable(() => import('./Movie/index'), { fallback: <Loading /> });

const Slide1 = loadable(() => import('./Slides/Slide1'), { fallback: <Loading /> });

const Forbidden = loadable(() => import('./Exception/403'));
const NoMatch = loadable(() => import('./Exception/404'));
const ServerDown = loadable(() => import('./Exception/500'));

const indexRoutes = [
  {
    exact: true,
    path: '/',
    component: Home
  },
  {
    exact: true,
    path: '/last-movie-releases',
    component: Movies
  },
  {
    path: '/movie-details/:movieId/:slideshow?',
    component: Movie
  },
  {
    path: '/slide1',
    component: Slide1
  },
  { path: '/403', component: Forbidden },
  { path: '/404', component: NoMatch },
  { path: '/500', component: ServerDown },
  { name: 'NoMatch', component: NoMatch }
];

export default indexRoutes;

从“React”导入React；
从'@loadable/component'导入可加载文件；
从“./Exception/Loading”导入加载；
const Home=loadable（（）=>import（'./Home/index'），{fallback:}）；
const Movies=loadable（（）=>import（'./Movies/index'），{fallback:}）；
const Movie=loadable（（）=>import（'./Movie/index'），{fallback:}）；
常量Slide1=可加载（（）=>import（'./Slides/Slide1'），{fallback:}）；
const禁止=可加载（（）=>导入（'./异常/403'）；
const NoMatch=loadable（（）=>import（'./Exception/404'）；
const ServerDown=loadable（（）=>import（'./Exception/500'）；
常数索引路由=[
{
确切地说：是的，
路径：“/”，
组成部分：家庭
},
{
确切地说：是的，
路径：'/last movie releases'，
组成部分：电影
},
{
路径：'/movie details/：movieId/：slideshow？'，
组成部分：电影
},
{
路径：'/slide1'，
组成部分：幻灯片1
},
{路径：'/403'，组件：禁止}，
{路径：'/404'，组件：NoMatch}，
{路径：'/500'，组件：ServerDown}，
{name:'NoMatch'，组件：NoMatch}
];
导出默认索引路由；
您应该试一试。它允许您在saga中发出异步请求。对不起，您几乎每句话都不正确。尤其是
可加载组件
在渲染过程中工作，saga以前也工作过。另外-
可加载组件
永远不会渲染
加载
组件在SSR。在SSR
可加载的
是100%同步的。它是nodejs！-你可能只需要
要求
你需要的，然后被给予。这应该是你的问题编辑，而不是答案。硬编码的路线？看起来不太好。。。
import {
  take,
  put,
  call,
  fork,
  select,
  delay,
  all,
  takeEvery,
  takeLatest
} from 'redux-saga/effects';
import * as api from './api';

import * as actions from '../actions';

// each entity defines 3 creators { request, success, failure }
const { movies, movie } = actions;

function* fetchEntity(entity, apiFn, body) {
  yield put(entity.request(body));
  const { response, error } = yield call(apiFn, body);
  if (response) yield put(entity.success(body, response));
  else yield put(entity.failure(body, error));
}

// yeah! we can also bind Generators
export const fetchMovies = fetchEntity.bind(null, movies, api.fetchMovies);
export const fetchMovie = fetchEntity.bind(null, movie, api.fetchMovie);

/******************************************************************************/
/********************************* SAGAS **************************************/
/******************************************************************************/

function* sagaFetchMovies() {
  yield call(fetchMovies);
}
function* sagaFetchMovie(movieId) {
  yield call(fetchMovie, movieId);
}

/******************************************************************************/
/******************************* WATCHERS *************************************/
/******************************************************************************/

function* watchFetchMovies() {
  while (true) {
    yield take(actions.FETCH_MOVIES);
    yield fork(sagaFetchMovies);
  }
}

function* watchFetchMovie() {
  while (true) {
    const { movieId } = yield take(actions.FETCH_MOVIE);
    yield fork(sagaFetchMovie, movieId);
  }
}

export default function* root() {
  yield all([fork(watchFetchMovies), fork(watchFetchMovie)]);
}

/***********************************************
***************** UPDATE BELOW *****************
***********************************************/

...
class Movie extends Component {
  constructor(props) {
    super(props);
    this.state = { isSlideShowOpened: false };

    const movie = props.app.movie.results.filter(e => e.id === Number(props.match.params.movieId));

    if (movie.length === 0) {
      props.fetchMovie(props.match.params.movieId); // <---- I dispatch here because componentWillMount is deprecated :s
    }
  }
...

...
class Movies extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
    if (props.app.movies.results.length === 0) {
      props.fetchMovies(); // <---- I dispatch here because componentWillMount is deprecated :s
    }
  }
...

import React from 'react';
import loadable from '@loadable/component';
import Loading from './Exception/Loading';

const Home = loadable(() => import('./Home/index'), { fallback: <Loading /> });
const Movies = loadable(() => import('./Movies/index'), { fallback: <Loading /> });
const Movie = loadable(() => import('./Movie/index'), { fallback: <Loading /> });

const Slide1 = loadable(() => import('./Slides/Slide1'), { fallback: <Loading /> });

const Forbidden = loadable(() => import('./Exception/403'));
const NoMatch = loadable(() => import('./Exception/404'));
const ServerDown = loadable(() => import('./Exception/500'));

const indexRoutes = [
  {
    exact: true,
    path: '/',
    component: Home
  },
  {
    exact: true,
    path: '/last-movie-releases',
    component: Movies
  },
  {
    path: '/movie-details/:movieId/:slideshow?',
    component: Movie
  },
  {
    path: '/slide1',
    component: Slide1
  },
  { path: '/403', component: Forbidden },
  { path: '/404', component: NoMatch },
  { path: '/500', component: ServerDown },
  { name: 'NoMatch', component: NoMatch }
];

export default indexRoutes;