如何在挂载 React 组件之前让 Saga 监视事件

How can I make Saga watch events before the React components are mounted?

本文关键字：Saga 监视 事件 组件 React      更新时间：2023-09-26

如果我将浏览器网址设置为：/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))
    }
}

由一个简单的根传奇调用：

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

这是我的 App 类由 react-router 处理：

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

我找到了一个干净简单的解决方法：在 rootSaga 中放置一个就绪操作并在主组件中等待它。 

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

我在使用 react-样板时遇到了类似的问题。我通过使用compose()修复了它。

别这样：

import { useInjectSaga } from 'utils/injectSaga';
export function App() {
  useInjectSaga({ key: 'app', saga }); //it's already too late, we're already loading the component
  return <div />;
}
export default compose()(App);

这样做：

import injectSaga from 'utils/injectSaga';
const key = 'app';
export function App() {
  return <div />;
}
const withSaga = injectSaga({ key, saga }); //this comes into play before the component loads
export default compose(withSaga)(App);

源

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

相关文章：