I am trying to clear all items stored in localStorage in Redux Saga method. But it's not working as expected.

In theory, If I want to call a function in Saga, we need to write it without brackets with call keyword.

So, I tried to write it with yield call(localStorage.clear); but it's not clearing items from the LocalStorage. If I added brackets () or without yeild & call, it's working and clearing items in LocalStorage as expected.

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);
}

I would like to know why the call function without brackets () is not working.

Is it because the function being called is void and not returning any value?
Do we always have to add brackets if we want to call void methods?

I am trying to clear all items stored in localStorage in Redux Saga method. But it's not working as expected.

In theory, If I want to call a function in Saga, we need to write it without brackets with call keyword.

So, I tried to write it with yield call(localStorage.clear); but it's not clearing items from the LocalStorage. If I added brackets () or without yeild & call, it's working and clearing items in LocalStorage as expected.

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);
}

I would like to know why the call function without brackets () is not working.

Is it because the function being called is void and not returning any value?
Do we always have to add brackets if we want to call void methods?

• javascript
• reactjs
• redux-saga

• You only need to use call for asynchronous operations. local Storage.clear is synchronous, so you can just call it directly – Patrick Hund Commented Aug 3, 2019 at 12:31

1 Answer 1

The reason it's not working is that the localStorage.clear function expects this to be equal to localStorage. That happens automatically when using the notation localStorage.clear, but if you just have a reference to the function and call it without context, you get an Illegal invocation error. This is not directly related to sagas, and can be reproduced like this:

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

This does have an indirect relationship to sagas though, which is the way call works. If you don't tell call what context it should use when calling the function, then it has no choice but to call it in a global context, causing this exception. call does have a few variations on its parameters that let you specify what this should equal. For example, you could do this:

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

You can see other variations of the parameters that call accepts here: https://redux-saga.js/docs/api/

Another option is to just not use call. Using call has benefits when trying to test a saga, and has the benefit that it works with both sagas and normal functions, but you can still call normal functions yourself if you want.