javascript - 如何在安装 React 组件之前让 Saga 监视事件？

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()
    ]
}

这是我的由 react 路由器处理的应用程序类:

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