我在等待“一个操作流程”从开始到结束完成时遇到问题。该应用程序在客户端中照常工作，但在服务器端执行操作时它直到最后才完成。

为了澄清这一点，我正确地使用了“next-redux-wrapper”和“next-redux-saga”，因为当我使用更简单的 sagas 流程时，我可以实现延迟渲染。

我认为错误主要在于我如何理解（或不理解）传奇效应。

为了简洁起见，省略了一些代码。

api.saga.js

const makeRequest = ({ body, url, method }) =>
  axios({ method, url: url, data: body });


export function* requestWatcher(action) {
  const { feature } = action.meta;

  try {
    const { data: response } = yield call(makeRequest, action.meta);
    yield put(apiSuccess({ response, feature }));
  } catch (error) {
    yield put(apiError({ error: error, feature }));
  }
}

export default function* apiSaga() {
  yield takeEvery(action => action.type.includes(API_REQUEST), requestWatcher);
}

SmallBusiness.saga.js

function* watchApiSuccess(action) {
  yield put(
    setPositions({ positions: action.payload.positions })
  );
  yield put(setLoader({ isLoading: false, feature: SMALL_BUSINESS }));
}

function* watchApiError() {
  yield put(setLoader({ isLoading: false, feature: SMALL_BUSINESS }));
}

function* watchFetchPositions() {
  yield put(
    apiRequest({
      body: null,
      method: 'GET',
      url: SMALL_BUSINESS_URL,
      feature: SMALL_BUSINESS
    })
  );
  yield put(setLoader({ isLoading: true, feature: SMALL_BUSINESS }));
}

export default function* smallBusinessSaga() {
  yield all([
    takeLatest(`${SMALL_BUSINESS} ${API_SUCCESS}`, watchApiSuccess),
    takeLatest(`${SMALL_BUSINESS} ${API_ERROR}`, watchApiError),
    takeLatest(FETCH_POSITIONS, watchFetchPositions)
  ]);
}

rootSaga.js

export default function* rootSaga() {
  yield all([call(smallBusinessSaga), call(apiSaga)]);
}

配置Store.js

store.sagaTask = sagaMiddleware.run(rootSaga);

客户端函数“watchApiSuccess”被调用，但服务器端则没有。除已经提到的函数外，每个生成器函数都在服务器端调用。

当我使用下面的代码示例简化流程时，应用程序将在服务器端预渲染。

function* watchPrefetchPositions() {
  const meta = {
    body: null,
    method: 'GET',
    url: SMALL_BUSINESS_URL,
    feature: SMALL_BUSINESS
  };

  const { data: response } = yield call(makeRequest, meta);
  yield put(setPositions({ positions: response.positions }));
}

export default function* smallBusinessSaga() {
  yield all([
    ...
    takeLatest(PRE_FETCH_POSITIONS, watchPrefetchPositions)
  ]);
}

我无法拥有复杂流程的主要问题是传奇无法执行标准化等操作。

您可以使用标志来控制组件何时以及是否应该渲染。这是渲染后备 UI（例如：旋转器或文本）的常见解决方案，以便等待异步进程（saga、thunk、API 服务等）完成并且组件拥有渲染自身所需的所有内容。

我在这里附上了一个 CodeSandBox 示例，以便您可以一目了然地了解它是如何工作的。https://codesandbox.io/embed/2586j3k1p https://codesandbox.io/embed/2586j3k1p

您可以看到加载出现了一会儿，直到获取数据。请注意，CodeSandBox 正在缓存此 API 调用，因此您在第一次单击后几乎不会注意到加载文本）。

React 路线图包括一个名为“Suspense”的处理异步渲染功能的版本，它模仿了与您所描述的这种特定类型的流程问题相同的行为。在 React 异步渲染发布之前，我建议使用标志。

如果您想了解更多详情，建议您观看

祝你好运