возникли трудности при отладке редукторов в redux

#javascript #reactjs #redux #react-redux

#javascript #reactjs #redux #реагировать-redux

Вопрос:

Я наткнулся на эти редукторы в кодовой базе, над которой я работаю на своей работе.

 const ACTION_HANDLERS = {
  [LOGIN_REQUEST]: (state, action) => ({
    ...state,
    isAuthenticating: true
  }),
  [LOGIN_SUCCESS]: (state, action) => ({
    ...state,
    isAuthenticating: false,
    isAuthenticated: true,
    userId: action.userId,
    authToken: action.auth,
    authTTL: action.ttl,
    authCreatedAt: action.created,
    isNewUser: action.isNewUserFlag
  }),
};

export default function authReducer(state = initialAuthState, action) {
  const handler = ACTION_HANDLERS[action.type];
  if(handler!==undefined){
      console.log('login handler',handler);
     // debugger;
  }

  return handler ? handler(state, action) : state;
}
  

Моя проблема связана с тем, как отладить этот метод с предварительно написанными редукторами.
Я ввел журналы консоли перед каждым [] в ACTION_HANDLERS, но они синтаксически неверны.
Я писал редукторы раньше, и они были такими.

 export default function FundsReducer(state=INITIAL_STATE,action={}){

  switch(action.type){

      case GET_ALL_FUNDS_FAILED:{
        return{
          ...state,
           funds:{
            ...state.funds,
            failed:true,
            pending:false,

          }
        };
      }
      case GET_ALL_FUNDS_PENDING:
      {
        let {options}=action.payload;

        return{
          ...state,
           funds:{
            ...state.funds,
            data:[],
            failed:null,
            pending:true,
          }
        };
      }
      case GET_ALL_FUNDS:
      {
         let data;
         data=action.payload.response.data;
        return{
          ...state,
          funds:{
            ...state.funds,
            data,
            pending:false,
          }
        }
      }
  

У меня возникли трудности с отладкой этих редукторов и введением журналов консоли.

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

1. Отличный отладчик для redux, позволяет шаг за шагом просматривать действия, редукторы и изменения состояния. github.com/zalmoxisus/redux-devtools-extension

2. В качестве альтернативы вы можете использовать промежуточное программное обеспечение redux для автоматического протоколирования ваших действий: github.com/LogRocket/redux-logger

3. Хорошая ли идея перенести его на второй метод, чтобы обеспечить лучшую отладку?

Ответ №1:

Вы можете использовать промежуточное программное обеспечение redux, как указано @remix23, или просто изменить свое действие, как показано ниже, чтобы вы могли регистрировать состояние или действие.

 [LOGIN_REQUEST]: (state, action) => {
 console.log(action);
 return {
    ...state,
    isAuthenticating: true
  }
}
  

Надеюсь, это вам поможет.