redux/toolkit combining actions, reducers, and services, for authentication and login - redux

Question

New to React, first attempt at building anything related to authentication. After following the Redux tutorial, I've seen it uses the reduxjs/toolkit to combine actions, reducers, and services using createSlice, createAsyncThunk, etc. All the tutorials I've read on authentication / login don't follow this pattern, and I can't wrap my head around setting up the initialState for authentication, users, and JWT. Is it possible to combine actions, reducers, and services into a "slice" or is it better to keep them separate?
The closest guide to what I want uses redux-thunkas a middleware, but if my app is already using redux/toolkit.
Any ideas how to go from this:
//_service auth.service.js
const login = (username, password) => {
//return JSON object
//Response: { "token": "lkjdfs9876fd", "user": "username", "type": "partner", "customer": "servicetrace" }
return axios.post(API_URL, 'signin', {
username,
password
})
.then((response) => {
if(response.data.accessToken){
localStorage.setItem('user', JSON.stringify(response.data))
}
return response.data;
})
.catch((error) => console.log(error));
};
//_reducer auth.js
const user = JSON.parse(localStorage.getItem("user"));
const initialState = user
? { isLoggedIn: true, user }
: { isLoggedIn: false, user: null };
export default function (state = initialState, action){
const { type, payload } = action;
switch (type) {
case LOGIN_SUCCESS:
return {
...state,
isLoggedIn: true,
user: payload.user,
};
case LOGIN_FAIL:
return {
...state,
isLoggedIn: false,
user: null,
};
case LOGOUT:
return {
...state,
isLoggedIn: false,
user: null,
};
default:
return state;
}
}
//_actions auth.js
export const login = (username, password) => (dispatch) => {
return AuthService.login(username, password)
.then(
(data) => {
dispatch({
type: LOGIN_SUCCESS,
payload: { user: data }
});
return Promise.resolve();
},
(error) => {
const message = (
error.response && error.response.data && error.response.data.message) ||
error.message ||
error.toString();
dispatch({
type: LOGIN_FAIL,
});
dispatch({
type: SET_MESSAGE,
payload: message
});
return Promise.reject();
}
);
};
into a single slice:
//authSlice.js
import { createSlice } from '#reduxjs/toolkit'
const initialState = {
isAuthenticated: false,
user: null,
token: null,
error: null
}
const authSlice = createSlice({
name: 'auth',
initialState,
reducers:{
loginSuccess: (state, action) => {
//
},
loginFailure: (state, action) => {
//
}
},
extraReducers:{}
});
export default authSlice.reducer

Answer 1

You'd transform the reducer to the slice, but keep the thunks as they are. The redux-thunk middleware is already included with redux toolkit, so you can directly use them - but they still need to be defined outside your slice.
You can also replace this hand-written thunk by one created with createAsyncThunk, but I'd first try to get this up & running and then take a look at the docs (or even better yet, the Async Logic and Data Fetching part of the official essentials tutorial) and refactor it over to cAT after that. No need to do everything at once.