#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
}
}
Надеюсь, это вам поможет.