redux-saga/loadable-component first fetch 不等待，但接下来的都是 yes

Question

我无法制作合适的服务器端。

当我启动我的服务器并进行提取时，例如 http://localhost:3000/last-movie-releases

toPromise() 不会等待第一次提取。但是接下来我做的其他的都好，服务器端就好了。

下面只是一个 sn-p 我的代码。我在类构造函数中调度我的 redux 操作。 （就像每个人一样）

  store
    .runSaga(rootSaga)
    .toPromise()
    .then(() => {
      console.log('sagas complete');
      const html = ReactDOMServer.renderToString(jsx);
      const css = sheets.toString();
      res.send(
        renderFullPage(html, css, serialize(store.getState()))
      );
    })
    .catch(e => {
      console.log(e.message);
      res.status(500).send(e.message);
    });

  ReactDOMServer.renderToString(jsx);

  store.close();

这是正常行为吗？

PS：我所说的 fetch 的传奇故事从 fork 开始，然后是 fork，然后是 call。和real-word repo中的一模一样

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

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

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

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
    }
  }
...

Answer 1

@loadable/component 服务器端渲染有一个很大的警告lol

@loadable/component 强制您拆分每个路由的代码，并最终使用回退（下载 js 包时的微调器）

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

@loadable/component 不会等待您的任何 saga。我没有其他选择，我认为这对 google 和 bing 来说还不错......

例如，我的反应路由器看起来像这样

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;