如何在React组件装入之前制作Saga watch事件？

Question

如果我将浏览器网址：/uni-classi-virtuali/gestisci/1

组件DettaglioClasseVirtuale（其中我有获取资源的调用）的功能componentWillMount的rootSaga开始前被调用。

有没有一种标准的方法让saga在应用程序启动时获取资源？

这是我用来获取资源 “classivirtualiuni” 的项目传奇守望者：

export function* watchGetClasseVirtualiUni() { 
    yield takeEvery(GET_CLASSE.REQUEST, getClasseVirtualiUni) 
} 

export function* getClasseVirtualiUni(action) { 
    try { 
     const data = yield call(fetchResource, `classivirtualiuni/${action.id}`) 
     if (data.success) { 
      yield put(getClasse.success(data.content)) 
     } else { 
      yield put(getClasse.failure(data.message)) 
     } 
    } catch (error) { 
     yield put(getClasse.failure(error.message)) 
    } 
} 

通过简单的rootsaga叫：

export default function* rootSaga() { 
    yield [ 
     // ... 
     // ... 
     watchGetClasseVirtualiUni() 
    ] 
} 

这是我的App类的反应，路由器处理：

class App extends Component { 

    render() { 
     return (
      <Router history={browserHistory}> 
       <Route path={'/uni-classi-virtuali'} component={Main} > 
        <IndexRedirect to={'/uni-classi-virtuali/gestisci'} /> 
        <Route path={'crea'} component={CreateClasseVirtualeUni} /> 
        <Route path={'gestisci'} component={ClasseVirtualeList} > 
         <Route path={':id'} component={DettaglioClasseVirtuale} /> 
        </Route> 
        <Route path={'iscriviti'} component={IscrivitiClasseVirtuale} /> 
       </Route> 
      </Router> 
     ) 
    } 
} 

这是调用提取数据的组件：

class DettaglioClasseVirtuale extends Component { 

    componentWillMount() { 
     // dispatch the GET_CLASSE.REQUEST action 
     this.fetchClasseVirtuale(this.props.classeId) 
    } 

    // ... 
} 

这是应用程序的核心：

function configureStore(initialState) { 
    const sagaMiddleware = createSagaMiddleware() 
    let finalCreateStore = applyMiddleware(thunk, sagaMiddleware)(createStore) 
    const store = finalCreateStore(reducer, initialState); 
    store.runSaga = sagaMiddleware.run 
    store.close =() => store.dispatch(END) 
    return store; 
} 

const store = configureStore() 
store.runSaga(rootSaga) 

ReactDOM.render(
    <div> 
     <Provider store={store}> 
      <App /> 
     </Provider> 
    </div>, 
    document.getElementById('virtual-class') 
) 

Answer 1

我发现了一个干净而简单的解决方法：在rootSaga中准备好一个动作，并在Main组件中等待它。

export default function* rootSaga() { 
    yield [ 
     // ... 
     // ... 
     watchGetClasseVirtualiUni(), 
     put(ready()) 
    ] 
} 

class App extends Component { 

    render() { 
     return (
      <Loader isLoaded={this.props.ready}> 
       <Router history={browserHistory}> 
        <Route path={'/uni-classi-virtuali'} component={Main} > 
        {//...} 
        </Route> 
       </Router> 
      </Loader> 
     ) 
    } 
} 

Answer 2

您可以添加getClasseVirtualiUni您rootSaga运行在应用程序启动而不是通过watchGetClasseVirtualiUni听行动。剩下的唯一问题是弄清楚如何传递通过组件的classeId。