【问题标题】：How to inject dependencies ( or context ) in redux-sagas如何在 redux-sagas 中注入依赖项（或上下文）
【发布时间】：2019-03-21 00:25:43
【问题描述】：

如何在 redux-sagas 中使用 DI。我有以下传奇

export function* loadUsers() {
  // Want to use something like userService.loadUsers()
}

如上面的代码所示，我如何将 userService 注入到 saga 中，理想情况下我想要这样的东西

export function* loadUsers(userService) {
   userService.loadUsers()
}

谢谢

【问题讨论】：

标签： javascript design-patterns dependency-injection redux redux-saga

【解决方案1】：

如何在 redux-sagas 中注入依赖？

如何在 redux-sagas 中使用 DI？

您可以使用Redux saga API 来做到这一点，您可以使用getContext 和setContext 方法来管理您的sagas 中的上下文。让我们看看它是如何工作的！

注入你的上下文

当您调用createSagaMiddleware 时，您可以传递一个上下文。稍后我们将了解如何在 sagas 中获取上下文

这是在redux-saga 中注入上下文的方法：

import { createUserService } from "...";
import createSagaMiddleware from "redux-saga";

const userService = createUserService(...);

const sagaMiddleware = createSagaMiddleware({
    context: {
        userService
    }
});

sagaMiddleware.run(rootSaga);

获取您的上下文

您可以从redux-saga/effects 导入getContext，然后使用所需上下文的键调用getContext。所以在这种情况下你会得到userService。

import { getContext } from "redux-saga/effects";

export function* loadUsersSagas(action) {
    const userService = yield getContext("userService");
    const users = yield userService.loadUsers();
    ...
}

测试

我们如何使用redux-saga 测试上下文您可以使用redux-saga-test-plan。这个库的目标是测试我们的 sagas。

我们想做什么？

在我们的测试中添加模拟上下文
确保我们尝试在上下文中获取正确的项目

对于provide，我们给出[[getContext("userService"), { loadUsers }]]，这是userService 的模拟上下文。

使用getContext，我们测试是否在此处的上下文中获得正确的项目：userService

import { getContext } from "redux-saga-test-plan/matchers";

describe("Load users", () => {
    it("should load mocked users", () => {
      const loadUsers = () => Promise.resolve([johnDoe]);
      const action = createAction(...);

      return expectSaga(loadUsersSagas, action)
        .provide([[getContext("userService"), { loadUsers }]])
        .getContext("userService")
        .call(...)
        .put(...)
        .run();
    });
});

希望我的回答能帮到你?

【讨论】：

【解决方案2】：

export function* loadUsers(userService) {
  userService.loadUsers()
}

其他地方：

export default function* rootSaga(userService) {
  yield all([
    ...,
    ...,
    loadUsers(userService)
  ]);
}

然后：

import { createUserService } from "...";
import createSagaMiddleware from "redux-saga";

const userService = createUserService(...);
const sagaMiddleware = createSagaMiddleware();

sagaMiddleware.run(
  rootSaga,
  userService
)

【讨论】：

你现在是怎么得到这个动作的？