Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/474.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在redux中调试还原程序有困难_Javascript_Reactjs_Redux_React Redux - Fatal编程技术网

Javascript 在redux中调试还原程序有困难

Javascript 在redux中调试还原程序有困难,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我在我工作的代码库中遇到了这些减缩器 const ACTION_HANDLERS = { [LOGIN_REQUEST]: (state, action) => ({ ...state, isAuthenticating: true }), [LOGIN_SUCCESS]: (state, action) => ({ ...state, isAuthenticating: false, isAuthenticated: true,

我在我工作的代码库中遇到了这些减缩器

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\u处理程序中的每个[]之前引入了控制台日志,但它们在语法上是错误的。 我以前写过减缩器,它们是这样的

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

我在调试这些还原程序和引入控制台日志方面遇到困难。

您可以使用@remix23提到的redux中间件,或者只需按以下方式更改操作,以便能够记录状态或操作

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

希望这将对您有所帮助。

redux的优秀调试器,允许您逐步查看操作、还原和状态更改。或者,您可以使用redux中间件自动记录您的操作:将其移植到第二种方法以实现更好的调试是一个好主意吗?