我无法制作合适的服务器端。
当我启动服务器并进行获取时，例如http://localhost:3000/last-movie-releases
toPromise()不会等待第一次获取。但是我接下来做的所有其他都很好，服务器端
就可以了。只是下面我的代码片段。我在类构造函数中调度我的 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 ：我正在谈论的获取传奇故事以fork开始，然后再次fork，然后是call。就像在真实单词存储库中一样
我想知道我是否错过了某个地方的回报。
/***********************************************
***************** 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
}
}
...
@loadable/组件服务器端渲染有一个很大的警告，哈哈
@loadable/组件强制您拆分每个路由的代码，并最终使用回退(下载 js 捆绑包时微调器(
让我提醒您@loadable/组件是市场上唯一能够为服务器端渲染进行拆分代码的模块，哈哈
好吧，您的任何传奇都不会被@loadable/组件等待。我没有其他选择，我认为这对谷歌和必应来说并不是那么糟糕......
例如，我的反应路由器看起来像这样
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;