javascript: when using Redux / Redux-Saga, should the JWTs be configured in the action / saga creators?

Almost all blog posts I've found around generic authentication handling using JWT in a React / Redux / Saga application do the same thing, which is storing JWT in local storage, in the action / saga.

For example:

Example A (redux-saga):

* authorize function ({payload: {login, password}}) {
options const = {
body: JSON.stringify ({login, password}),
method: & # 39; POST & # 39 ;,
headers: {& # 39; Content-Type & # 39 ;: & # 39; application / json & # 39;}
};

try {
const {token} = call performance (fetchJSON, & # 39; / login & # 39 ;, options);
performance set ({type: AUTH_SUCCESS, payload: token});
localStorage.setItem (& # 39; token & # 39 ;, token);
} capture (error) {
leave a message;
switch (error.status) {
case 500: message = & # 39; Internal server error & # 39 ;; break;
case 401: message = & # 39; invalid credentials & # 39 ;; break;
default: message = & # 39; Something went wrong & # 39 ;;
}
put performance ({type: AUTH_FAILURE, payload: message});
localStorage.removeItem (& # 39; token & # 39;);
}
}

function * saga () {
takeLatest performance (AUTH_REQUEST, authorize);
}

Example B (redux):

login function (username, password) {
const requestOptions = {
method: & # 39; POST & # 39 ;,
headers: {& # 39; Content-Type & # 39 ;: & # 39; application / json & # 39;},
body: JSON.stringify ({username, password})
};

Fetch return (`$ {config.apiUrl} / users / authenticate`, requestOptions)
.then (handleResponse)
.then (user => {
// successful logon if there is a jwt token in the response
if (user.token) {
// store the details of the user and the jwt token in the local storage to keep the user connected between the updates of the page
localStorage.setItem (& # 39; user & # 39 ;, JSON.stringify (user));
}

Returned user
});
}

logout () {function
// remove the user from local storage to close the user's session
localStorage.removeItem (& # 39; user & # 39;);
}

Now, aside from the storage of JWT in the local storage, what worries me is the adjustment of the state within the action / creator of the action, instead of a reducer.

As I understand it, the creators of actions / sagas should be used only to determine the data that will be used, and it depends on the reducers to store / preserve the data.

Why, then, does it seem that everyone overlooks the use of redux as the state of the application when it comes to authentication?

Redux LOAD / SUCCESS / ERROR pattern – when using the redux saga

In a typical web application, we commonly have to deal with the LOADING / SUCCESS / ERROR problem, which is that:

  • When I make a backend request I want to show a loading cursor, maybe disable some buttons.
  • When the request finishes correctly, I want to show the data.
  • When the request ends with an error, I want to show or handle the error.

If you're not careful, this can lead to a spaghetti code, especially if you're doing things like having two requests running at the same time, and managing that when one request ends, it does not stop the load cursor for the other. Article, for example.

Only for redux. I found that this solution works quite well.

Basically, three actions are defined:

GET_FOO_REQUEST
GET_FOO_SUCCESS
GET_FOO_FAILURE

and then it has a generic reducer that will intercept all the requests and establish in its state of redux the state of charge and error, for that particular type of request (in this case GET_FOO).

Then you can select the load or error status in the component that needs it:

const loadingSelector = createLoadingSelector (['GET_FOO']);

const mapStateToProps = (state) => ({isFetching: loadingSelector (state)});

My question is: if I am using redux-saga, this pattern still applies well, or does redux-saga already solve this problem?