2017-02-24 190 views
2

在API調用後,我獲得了雙重嵌套狀態。就這個。Redux商店雙重嵌套

Screenshot from redux devtools

這裏是我的行動

export const getUserSuccess = user => ({ 
 
    type: GET_USER_SUCCESS, 
 
    user, 
 
}); 
 

 
export const getUserFailure = error => ({ 
 
    type: GET_USER_FAILURE, 
 
    error, 
 
}); 
 

 
export const getUserRequest =() => (
 
    dispatch => (
 
    axios.get('./user.json') 
 
     .then(response => dispatch(getUserSuccess(response.data))) 
 
     .catch(error => dispatch(getUserFailure(error))) 
 
) 
 
);

這裏是我的用戶減速器

export default function user(state = {}, action) { 
 
    switch (action.type) { 
 
    case GET_USER_SUCCESS: 
 
     return { 
 
     ...state, 
 
     user: action.user, 
 
     }; 
 
    case GET_USER_FAILURE: 
 
     return { 
 
     ...state, 
 
     error: action.error, 
 
     }; 
 
    default: 
 
     return state; 
 
    } 
 
}

,這裏是我的根減速

export default combineReducers({ 
 
    user, 
 
});

+0

是所有那些額外的逗號和省略號在reactjs庫中有效嗎?否則看起來像不好的JavaScript是你的罪魁禍首。 – Matt

+1

nah bro:D我不可以做出反應。我會得到沒有這個逗號的錯誤 –

回答

0

如果減速應更新爲新用戶的完整表示狀態(並丟棄舊的數據),你應該只返回新用戶爲狀態。

你可以給以下一個鏡頭?

export default function user(state = {}, action) { 
 
    switch (action.type) { 
 
    case GET_USER_SUCCESS: 
 
     return action.user; 
 
    case GET_USER_FAILURE: 
 
     return { 
 
     ...state, 
 
     error: action.error, 
 
     }; 
 
    default: 
 
     return state; 
 
    } 
 
}

+1

是的,它的工作原理。謝謝 –

+0

我不同意這個答案,因爲它不會從初始狀態返回屬性,並且如果從動作中接收到的對象不包含用戶縮減器之前狀態的屬性,那麼您正在修改該對象的方式可能不是你期望的。這可能會導致連接組件中出現錯誤,您希望定義的屬性突然變爲「未定義」。我寧願使用展開運算符或對象分配來將之前的狀態與動作的有效負載組合在一起。 –

+0

@YoWakita - 我不同意,但這一切都取決於用例。如果這是跟蹤註銷並以獨立用戶身份登錄的用戶,那麼爲什麼您希望舊用戶的屬性留在狀態? – cchamberlain

2

您需要傳播它來爲用戶的數據,沒有必要將它分配給user。你減速是在它已經

case GET_USER_SUCCESS: 
 
    return { 
 
    ...state, 
 
    ...action.user 
 
    };

+0

這種情況只適用於單個用戶對象。如果我用數組的用戶嘗試,那麼數組將被銷燬 –

0

通過這句話

來看如果我會嘗試與用戶,那麼陣列將被銷燬

的陣列爲什麼不使用Object.assign()?

return Object.assign({}, state, {user: [...state.user, ...action.user]}) 

假設有多個用戶是可能的,爲什麼不只是維護你的狀態作爲一個數組的用戶屬性?

+0

我只需要做出2個動作。首先將從API 獲得單個用戶對象,第二個將從API獲取多個用戶的數組,並且我需要在狀態中單獨保存它們。 –

+0

如果單獨使用兩個屬性,或者如果api調用不相關,那麼我建議只使用一個單獨的reducer來處理用戶數組。 –