时间戳

首页 > 解决方案 > 在大型项目中使用 Redux Saga

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

问题描述

我是 reactjs 新手，正在尝试学习 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。

我假设，当项目变得更大、更复杂并且有很多模块时，所有的观察者都将以与上面代码相​​同的方式添加

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

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

这是这样做的正确方法吗？

标签： reactjsredux-saga

解决方案

组织 sagas 很像组织 reducer。你也可能会开始在根减速器中使用 combineReducers 并使用所有减速器的平面列表，它甚至可以很好地扩展。一长串reducers/sagas 通常不会导致很多问题。

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

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

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

推荐阅读