在Redux中清除陣列狀態

如何在Redux中清除陣列狀態？我有一個空數組的初始狀態，並且正在添加事物。我想有，只是明確表示，我嘗試以下方法的作用，但它提供了有關「action.payload」我給予CLEAR_THINGS行動我「意外令牌」錯誤：在Redux中清除陣列狀態

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return { 
      ...state, 
      action.payload // payload here is []... 
     }; 
    default: 
     return state; 
}}

它還拋出錯誤，如果我只是使用[]而不是通過action.payload。

來源

2016-09-12 Maboo

它不應該返回而不是返回{...}嗎？ – aw04

@ aw04，但它只會添加'[]'作爲數組中的新元素。 – Maboo

'return []'應該可以工作，向我們展示你的reducer – topheman

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return []; 
    default: 
     return state; 
}}

的RECEIVE_THING操作使用對象傳播符號來返回是一個數組的狀態（[]），其中包含了以前的狀態（[...state]），並增加了一個新的項目（[...state, action.payload] ）。用於此新項目的鍵/屬性名稱只是數組的下一個索引。畢竟，它是一個數組。

在你的代碼CLEAR_THINGS要創建包含舊狀態的對象（{}）（說這是['item1']），所以它看起來像{ '0': ['item1'] }。接下來，繼續使用object shorthand notation來添加更多狀態，但這需要您使用單個標識符（一個單詞），但您使用虛線概念（合格標識符）來訪問屬性。你有點指示創建一個名爲action.payload的propery，但這是非法的，這是你的錯誤來自的地方。它在數組的情況下工作的原因是因爲在這種情況下只需要一個值，因爲密鑰是從數組的索引派生的。

你想要做的是總是返回相同類型的對象，在你的情況下，一個數組。從return {開始，你已經走錯了路。

來源

2016-09-12 18:19:40 DDS

的ES6簡寫操作

{thing}

transpiles到

{"thing": thing}

這將導致你的情況有語法錯誤，因爲鍵包含一個週期，目前還不清楚的關鍵應該是什麼。也許你打算這樣？

return { 
    action: { 
     payload: action.payload 
    } 
}

但是，這並沒有解決手頭的問題：如果要清除陣列這個動作，你不應該擴大現有狀態到下一狀態。相反，您應該只返回與您現有狀態相同形狀的東西，但語義上具有空的含義（在這種情況下，只是一個空數組）。我想你想要的是

case "RECEIVE_THING": 
    return [ 
     ...state, 
     action.payload 
    ]; 
case "CLEAR_THINGS": 
    return [];

來源

2016-09-12 18:14:59 LINKIWI

你應該只返回空數組中的「CLEAR_THINGS」處理程序：

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return []; 
    default: 
     return state; 
}}

既然你只是要清除一切有不是需要引用現有的狀態，你只是想將新狀態設置爲空數組。

另一件值得一提的事情是，我可能會將我的數組嵌入對象中。如果您的減速器在將來變得更加複雜，那麼很難按照這種方式添加功能，並且這種方法可以讓您的應用在需要時獲得進一步的複雜性。當然，您可以隨時添加減速器，但我希望通過這種方式使減速器更加靈活。這看起來像：

export default (state = { myArray: [] }, action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return { 
      ...state, 
      myArray: state.myArray.concat([action.payload]), 
     }; 
    case "CLEAR_THINGS": 
     return { 
      ...state, 
      myArray: [], 
     }; 
    default: 
     return state; 
}}

來源

2016-09-12 18:17:37

在Redux中清除陣列狀態

回答

相關問題