reactjs - 在大型项目中使用Redux Saga

我是ReactJS的新手，正在尝试学习传奇。

我建立了一个根传奇文件，如下所示。

import { all } from 'redux-saga/effects';

import { watchBookFetchRequest } from './bookSaga'
import { watchAuthRequest, watchIsLoggedInRequest, watchLogoutRequest } from './authSaga'

export default function* rootSaga() {
   yield all([
    watchAuthRequest(),
    watchBookFetchRequest(),
    watchIsLoggedInRequest(),
    watchLogoutRequest()
   ]);
}

对于每个模块，我创建了一个单独的saga文件，并将所有这些相关操作放入该文件中。

最后，我采取了所有这些措施，并将其结合到了根源中。


  我认为，当项目变得越来越大，越来越复杂并且有很多
  的模块，所有观察者将以与
  以上代码

export default function* rootSaga() {
   yield all([
    watchRequest1(),
    watchRequest2()
    .
    .
    .
    watchRequestn()
   ]);
}

也就是说，根源传奇将包含许多观察者-登录，仪表板，帐簿，帐户等的观察者。

这是正确的方法吗？

最佳答案

组织Sagas非常类似于组织减速器。您可能还可能会在根化约简的所有reducer列表中开始使用CombineReducers，它甚至可以很好地扩展。减速器/传奇的一长串通常不是很多问题的根源。

但是，最终在两种情况下，您可能都想引入树结构。例如，如果您的应用程序如下所示：

+-- services/
|   +-- live-updates/
|   |   +-- live-updates-saga.js
|   +-- local-storage/
|   |   +-- local-storage-saga.js
|   +-- services-saga.js
+-- sections/
|   +-- home/
|   |   +-- home-saga.js
|   +-- contacts/
|   |   +-- contacts-saga.js
|   +-- sections-saga.js
+-- root-saga.js

您可以通过以下方式运行Sagas：

// root-saga.js
function* rootSaga () {
    yield all([
        fork(servicesSaga),
        fork(sectionsSaga),
    ])
}

// services-saga.js
function* servicesSaga () {
    yield all([
        fork(liveUpdatesSaga),
        fork(localStorageSaga),
    ])
}

// sections-saga.js
function* sectionsSaga () {
    yield all([
        fork(homeSaga),
        fork(conactsSaga),
    ])
}

// live-updates/local-storage/home/contacts-saga.js
function* liveUpdatesSaga () {
    yield takeEvery(XYZ, xyzSaga)
}

我不会将任何一种解决方案称为“正确”的解决方案。只是尝试一下什么套件可以更好。