1

当我运行 sagaMiddleware

rootTask 的（返回的 sagaMiddleware.run(rootSaga)） done Promise 从未得到解决，问题出在哪里？

todo.sagas.js

import { put } from 'redux-saga/effects';
import { takeEvery } from 'redux-saga';

function* addTodoHandler(action){
    yield put({type: 'addTodo', payload: action.payload})
}

const testWatcher = function* (){
    yield takeEvery('addTodoAsync', addTodoHandler);
}

export default {
    testWatcher
}

注册Sagas.js

let rs = [];
rs.push(require('./todo/todo.sagas'));
let sagasMap = rs.reduce((o, m) => {
    for(var p in m['default']){
        o[p] = m['default'][p];
    }
    return o;
}, {});
let sagas = Object.keys(sagasMap).map(k => sagasMap[k]);
rootSaga = function*(){
    yield sagas.map(saga => saga());
}

服务端渲染 rootTask 从未被解决，持续等待！

export function RouteMatchHandler(data){
  return new Promise((resolve, reject) => {
    match(data, (error, redirectLocation, renderProps) => {
      if (error) {
        return resolve({
          code: 500,
          payload: error
        });
      } else if (redirectLocation) {
        let url = redirectLocation.pathname + redirectLocation.search;
        return resolve({
          code: 301,
          payload: url
        });
      } else if (renderProps) {
        let { query, params, components, history} = renderProps;
        let store = configureStore();
        let rootTask = store.runSaga(rootSaga);
        let html = null;
        wrap(execFetchDataEntryPoint)(components, { query, params, store, history })
          .then(() => {
            renderToString(
              <Provider store={store}>
                {<RouterContext {...renderProps} />}
              </Provider>
            )
            return store.dispatch(END);
          })
          .then(() => {
            return rootTask.done  // never been resolved, pending     continously!!!
          })
          .then(() => {
            html = renderToString(
              <Provider store={store}>
                {<RouterContext {...renderProps} />}
              </Provider>
            )
            return resolve({
              code: 200,
              payload: {html, state: store.getState()}
            });
          })
      } else {
        return resolve({
            code: 301,
            payload: 'NOT FOUND'
          });
      }
    })
  });
}

//helpers
function* execFetchDataEntryPoint(components, metadata){
  if(!components || !components.length){
    return;
  }
  let component = components[0].WrappedComponent ? components[0].WrappedComponent : components[0];
  if(component.fetchData){
    yield component.fetchData(metadata);
  }
  return yield getFetchDataEntryPoint(components.slice(1), metadata);
}
4

0 回答 0