can somebody explain why this code dispatching ‘actions.loginSuccess’ when i get 401 error from server ?
isn’t it should go to ‘catch’ part of axios request ?
Before i did it without redux toolkit features
const login = ({username, password}) => async dispatch => {
await axios.post(`${API_URL}/token/`, {username, password})
.then(response => {
dispatch(actions.loginSuccess({ client_id: response?.data.client_id }))
history.push('/')
})
.catch(e => {
dispatch(actions.loginError({ error: String(e) }))
})
}
//actions.js
const login = createAction('@USER/login')
const loginSuccess = createAction('@USER/login-success')
const loginError = createAction('@USER/login-error')
export const actions = {
login,
loginSuccess,
loginError
}
//reducers.js
export const userReducer = createReducer(initialState, builder => {
builder.addCase(actions.login, draft => {
draft.loading = true
})
builder.addCase(actions.loginSuccess, (draft, action) => {
draft.loading = false
draft.isLoggedIn = true
draft.data = { ...draft.data, client_id : action.client_id}
})
builder.addCase(actions.loginError, (draft, action) => {
draft.loading = false
draft.error = action.payload.error
draft.isLoggedIn = false
draft.isSignedup = false
})
}
can somebody explain why this code dispatching ‘actions.loginSuccess’ when i get 401 error from server ? isn’t it should go to ‘catch’ part of axios request ?
Here’s redux-toolkit version of your code to handle either HTTP status code 401, or body response code
don’t forget to add userSlice into configureStore()