javascript - Redux-Saga 如何在 Saga 中调用 localStorage.clear 方法

Question

我正在尝试用 Redux Saga 方法清除存储在 localStorage 中的所有项目。但它没有按预期工作。

理论上，如果我想在 Saga 中调用一个函数，我们需要用 call 关键字来编写不带括号的函数。

所以，我尝试用 yield call(localStorage.clear); 编写它，但它没有从 LocalStorage 中清除项目。如果我添加了 brackets () 或没有添加 yeild & call，它会正常工作并按预期清除 LocalStorage 中的项目。

export function* logoutUserSaga() {
try {
    const accessToken = yield call(AuthService.getAccessToken);
    yield call(AuthService.logoutUser, accessToken); 
    yield put(logoutUser.success());

    yield call(localStorage.clear); // not working

    //yield call(localStorage.clear()); // working
    //localStorage.clear(); // working

    yield put({ type: RESET_ALL_STATE });
}
catch (error) {
    yield put(logoutUser.failure({ errorMessage: error.statusText }));
}
}

export default function* watcherSaga() {
    yield takeLatest(authenticateUser.TRIGGER, authenticateUserSaga);
    yield takeLatest(logoutUser.TRIGGER, logoutUserSaga);
    yield takeLatest(getAccessToken.TRIGGER, getAccessTokenSaga);
}

我想知道为什么没有括号()的调用函数不起作用。

是不是因为被调用的函数是void，没有返回任何值？
如果我们想调用 void 方法，是否总是必须添加括号？

Answer 1

它不起作用的原因是 localStorage.clear 函数期望 this 等于 localStorage。当使用符号 localStorage.clear 时，这种情况会自动发生，但如果您只有对该函数的引用并在没有上下文的情况下调用它，则会出现非法调用错误。这与 sagas 没有直接相关，可以像这样重现:

  const clear = localStorage.clear;
  clear(); // throws an exception

这确实与 sagas 有间接关系，这就是 call 的工作方式。如果你在调用函数时不告诉call它应该使用什么上下文，那么它别无选择，只能在全局上下文中调用它，从而导致这个异常。 call 的参数确实有一些变体，可让您指定 this 应该等于什么。例如，您可以这样做:

yield call([localStorage, localStorage.clear]);

您可以在此处查看调用接受的参数的其他变体:https://redux-saga.js.org/docs/api/

---

另一种选择是不使用call。在尝试测试 saga 时使用 call 有好处，它的好处是它适用于 sagas 和普通函数，但如果需要，您仍然可以自己调用普通函数。