Блог

Главная - Вопросы по программированию - преобразование в преобразование-рефакторинг инструментария

преобразование в преобразование-рефакторинг инструментария

#javascript #reactjs #redux #redux-toolkit

#javascript #reactjs #сокращение #redux-toolkit

Вопрос:

может кто-нибудь объяснить, почему этот код отправляет действия.loginSuccess’ когда я получаю ошибку 401 с сервера? разве это не должно быть частью запроса axios ‘catch’?

Прежде чем я сделал это без функций redux toolkit

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

Комментарии:

1. Посмотрите на ответ, возвращаемый axios, и посмотрите, возвращает ли он ответ или выдает ошибку. Вы можете использовать validateResponse настройку axios в своем запросе, чтобы контролировать, какие ответы будут рассматриваться как ошибки. Вероятно, вы захотите использовать createAsyncThunk функцию в redux-toolkit: redux-toolkit.js.org/api/createAsyncThunk

2. @LindaPaiste проблема в том, что он возвращает undefined и говорит, что не может прочитать «данные» ответа, потому что не определено.

Ответ №1:

может кто-нибудь объяснить, почему этот код отправляет действия.loginSuccess’ когда я получаю ошибку 401 с сервера? разве это не должно быть частью запроса axios ‘catch’?

  // there's a difference beetween HTTP Status Code and Server Response Body Code.

 // if HTTP status code is not 200, it should dispatched loginError()

 // if HTTP status code is 200, and theres a response body JSON

 // e.g 
 const resp = {
   statusCode: 401,
   message: 'unauthorized',
 }

 // You must make if conditions to handle that error code

Вот версия вашего кода redux-toolkit для обработки либо кода состояния HTTP 401, либо кода ответа тела

 // import axios amp; history
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  data: {},
  loading: false,
  isLoggedIn: false,
  isSignedup: false,
};

// Reducers
const userSlice = createSlice({
  name: '@USER',
  initialState: initialState,
  reducers: {
    loginStart(state) {
      state.loading = true;
    },
    loginSuccess(state, action) {
      state.data = { 
        ...state.data, 
        client_id: action.payload.client_id 
      };
      state.loading = false;
      state.isLoggedIn = true;
    },
    loginError(state, action) {
      state.loading = false;
      state.error = action.payload.error;
      state.isLoggedIn = false;
      state.isSignedup = false;
    },
  },
});

// actions
export const { loginStart, loginSuccess, loginError } = userSlice.actions;
export default userSlice.reducer;

export const login = ({ username, password }) => async (dispatch) => {
  dispatch(loginStart());
  try {
    const response = await axios.post(`${API_URL}/token/`, {
      username,
      password,
    });
    if(response amp;amp; response.statusCode !== 200){
      return dispatch(loginError({ error: response.message }));
    }

    dispatch(loginSuccess({ client_id: response?.data.client_id }));
    history.push('/');
  } catch (e) {
    dispatch(loginError({ error: String(e) }));
  }
};

не забудьте добавить userSlice в configureStore() 

 const reducer = {
  "@USER": userReducers, //got from export default userSlice.reducer
};

export default configureStore({
  reducer,
  middleware,
  devTools: process.env.NODE_ENV !== 'production',
});
Метки: