如何在redux-sagas中注入依赖项（或上下文）

Question

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

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

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

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

谢谢

Answer 1

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

如何在redux-sagas中使用DI？

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

注入你的情境

致电时，createSagaMiddleware您可以传递上下文。稍后我们将看到如何在您的环境中获得您的背景信息

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

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

const userService = createUserService(...);

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

sagaMiddleware.run(rootSaga);

了解你的情况

您可以getContext从redux-saga / effects导入，然后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();
    });
});

希望我的回答对您有所帮助

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