react-redux數組中的更新項不會重新渲染

Question

我有一個reducer，它在對象中返回一個包含數組的對象。我渲染數組中的項目列表，當用戶單擊該項目時，我想重新渲染數組（至少是項目）。我創建了一個jsbin，顯示問題：

https://jsbin.com/fadudeyaru/1/edit?js,console,output

要重現該問題，請單擊+或 - 按鈕幾次創造歷史。然後點擊其中一個歷史項目。您會注意到控制檯日誌會注意到該事件並更新狀態，但該列表不會重新呈現。這可以通過點擊列表中的項目之後再次單擊+/-按鈕來驗證。之後你會看到它正確渲染。

問題是爲什麼react-redux不會導致重新呈現？我需要做些什麼來強制這個問題？

在此先感謝。

Answer 1

redux中的狀態是不可變的。這意味着reducer應該爲每個突變創建一個新的狀態。優選地，當存在陣列時應該進行深度克隆。以下代碼爲您的代碼提供了一個大致的深度克隆。嘗試像lodash/deepClone這樣的實用程序，以獲得更簡單的解決方案。

const counter = (state = {count:0, history:[]}, action) => { 
    let {count} = state; 
    let history = [...state.history]; 

    switch (action.type) { 
    case 'SELECT': 
     history[action.i].selected = true; 
     break; 
    case 'INCREMENT': 
     history.push({count,selected:false}); 
     count++; 

     break; 
    case 'DECREMENT': 
     history.push({count,selected:false}); 
     count--; 
     break; 
    default: 
     break; 
    } 
    console.log("count reducer: ", {count,history}) 
    return {count,history}; 
}