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

Question

我是reactjs新手，正在尝试学习saga。

我已经构建了一个 root saga 文件，如下所示。

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 文件并将所有相关操作放入该文件中。

最后，我采取了所有这些操作并将它们组合到 root saga 中。

I assume, when the project becomes big and more complex and has a lot of modules, all the watchers will be added in the same way like the above code

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

也就是说，根传奇将包含相当多的观察者 - 登录、仪表板、书籍、帐户等的观察者..

这是正确的做法吗？

Answer 1

组织传奇很像组织 reducer 。您可能还会开始在根 reducer 中使用combineReducers，并使用所有 reducer 的平面列表，它甚至可以很好地扩展。长长的 reducer /传奇列表通常不会造成太多问题。

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

+-- 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

你可以这样运行你的传奇:

// 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/local-storage-saga.js
function* liveUpdatesSaga () {
    yield takeEvery(XYZ, xyzSaga)
}

我不会将任何一种解决方案称为“正确”的解决方案。只是尝试一下什么更适合您。