如何在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

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
)

Answer 2

如何在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);

获取上下文

您可以从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();
    });
});

希望我的回答对您有帮助