Redux reducer動態按鍵注入

首先，我明白這是一個突變的狀態改變;我對我感到羞恥。有時候，正確的方式似乎不是最聰明的，或者我至少不知道更好。Redux reducer動態按鍵注入

讓我解釋一下，我不想將鍵注入到狀態中，而無需爲預定義的項目創建和交換舊狀態和新狀態。我只是想注射一段時間的鑰匙，如果我不這樣做，那麼他們都會被清除。我最初的狀態看起來像

{graphSite: {site: "default", graphBrowser: { graphID: '', graphKey:'' }, browsable:[] }};

我減速看起來像這樣**使用巴貝爾ES7對象蔓延運營商

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
       return {...state} 
       }

因此，這將工作，但終極版開發工具犯規顯示狀態的變化，雖然閱覽陣列訪問也許這是因爲我違背了糧食但如果我延長了變化：在工具正確

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...state.graphSite.browsable} } 
           } 
          }

現在瀏覽的節目，但最好我這些都是在S阿米的東西。

所以問題是什麼是最好的方式來操縱狀態的動態密鑰不在初始存儲狀態。這工作只是覺得我做錯了什麼，因爲我操縱了原來的狀態。

來源

2016-06-21 JustDave

你正在改變狀態本身。 'state.graphSite.browsable [action.id] = action.payload'。你需要做一個狀態的深層副本，並按照你所做的方式改變副本，然後返回副本 – xiaofan2406

我希望動作ID足夠動態，我不必跟蹤可能的初始狀態改變。問題是沒有任何東西可以複製，除非你改變原始文件並將它作爲新文件返回。否則id做正常的對象傳播和我想要改變的片斷。這主要是爲了關鍵的緣故，因爲如果這是一個數組，我不能保證來自異步調用的命令。 – JustDave

標題混淆了我在第一個地方。 dynamic key injection聽起來對我來說太過花哨：P。

無論如何，你真的想要添加一個新的對你的browserble。您有：

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
      return {...state} 
      }

這是錯誤的（假設state自帶形式減速參數），因爲你是直接修改state對象。

redux的原理之一就是Changes are made with pure functions。（還原文檔）。

FTFY：

case BROWSER: { 
    const nextState = JSON.parse(JSON.stringify(state)); // deep copy your state 
    nextState.graphSite.browsable[action.id] = action.payload 
    return nextState 
}

這不是最effecient代碼，JSON操作是昂貴的。這只是爲了展示不直接改變狀態對象的原則。

來源

2016-06-22 00:29:44 xiaofan2406

-1

好的，我無法在對象傳播的上下文中看到如何追加變量鍵並且沒有創建初始存儲狀態。複製狀態然後返回附加信息後，這非常簡單;這兩個人都工作，現在只是不修改原來的狀態。

case BROWSER: { let browser = {...state} 
         browser.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser.graphSite.browsable} 
            } 
           } 
          }

沒有你的反對票解構右感謝偉大工程，這裏

case BROWSER: { let {graphSite: {browsable: browser}} = state 
         browser[action.id] = action.payload 

         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser} 
            } 
           } 
          }

我也意識到我可以使用像速凍或不變，以檢查這些，但練習。

來源

2016-06-22 16:05:59 JustDave

** note **：對象傳播運算符淺拷貝您的狀態。因此，你的代碼仍然直接修改狀態，這可能會導致意外的錯誤。 – xiaofan2406

Redux reducer動態按鍵注入

回答

相關問題