正確更新REDX應用程序中的所有狀態

我在應用程序的縮減器中遇到了一些問題，我的狀態包含2個數組：正確更新REDX應用程序中的所有狀態

{ 
    elements: [], 
    constraints: [] 
}

這些要素是由2個減速處理：

elementsReducer 
constraintsReducer

和組合是這樣的：

let reducer = combineReducers({ 
    elements: elementsReducer, 
    constraints: constraintsReducer 
}); 

export default reducer

所以，基本上，一個動作就被觸發，我的reducer應該更新所有的state.elements數組。我已經嘗試了幾件事情，但我無法更新整個元素數組，只有 - 在最好的情況下 - 第一個元素。

我的第一個想法是要做到：

 return Object.assign({}, state, { 
      elements: state.map((e) => { 
       return Object.assign({}, e, { 
        text: action.data[e.id][e.text] 
       }) 
      }) 
     });

action.data是包含用於每個元件的不同的文本的陣列。基本上，我所要做的就是通過一個特殊的操作更新所有元素數組。但是這種語法不起作用，因爲它在商店的數組「元素」中創建了一個新的數組。它不會取代它。如果我讓這一點，店裏就變成了：

{ 
    elements: [ 
     elements: [...] 
    ], 
    constraints: [...] 
}

當我在減速elementsReducer訪問狀態，也只爲「元素」陣列和不完整的狀態。本次發行後，我試圖做到以下幾點：

return state.map(function(e) { 
    return assign({}, e, { 
      text: action.data[e.id][e.text] 
    }); 
});

現在，我的工作，但映射的唯一因素是第一位的。其他元素根本不會更新。

你有什麼想法解決這個問題嗎？

謝謝大家:) Xelys

編輯：

// code of elementsReducer 
var assign = require('object-assign'); 

export default function elementsReducer(state = {}, action) { 
    switch (action.type) { 
     case 'ADD_ELEMENT': 
      return [...state, 
       { 
        name: action.name, 
        id: action.id, 
        committed: false, 
        text: action.text 
       } 
      ] 
     case 'COMMIT_ELEMENT': 
      console.log('commit action') 
      return state.map(function(e) { 
       return e.id === action.id ? 
       assign({}, e, {committed: true}) : 
       e 
      }); 
     case 'SAVE_DATA': 
      return state.map((e) => { 
       return Object.assign({}, e, { 
        text: action.data[e.id][e.text] 
       }); 
      }); 
     default: 
      return state; 
    } 
}

來源

2016-09-07 Xelys

你可以發佈'elementsReducer'的代碼嗎？ –

當然，它來了。 – Xelys

基於您的代碼，我認爲你的數據結構如下圖所示：

// state.element 
stateElement = [ 
    { id:1, text: '1t' }, 
    { id:2, text: '2t' } 
]; 

// Your action result 
action = { 
    data: { 
     1: { text: 'new 1t' }, 
     2: { text: 'new 2t' } 
    } 
} 

// Your new state.element 
newData = data.map(function(e) { 
    return Object.assign({}, e, { 
      text: action.data[e.id].text 
    }); 
});

來源

2016-09-07 14:59:40

感謝您的答案。

@Ali Sepehri.Kh，是的，我的數據結構非常相似。事實上，這有點複雜，但我已經簡化了它，使其更加可靠。

但是，我想通過解決這個問題。我感到非常慚愧於在stackoverflow上創建一個帖子，因爲這個錯誤與redux無關。

我用過的映射函數完全可以工作。問題在於行動數據。創建action.data數組的函數在第一個元素之後返回一個空數組。我認爲這個問題來自地圖（），因爲它對我來說是功能中「最困難」的部分。

但是，我在創建動作數組的功能上犯了一個愚蠢的錯誤。我在for循環中放置了一個「return」，這解釋了第一個元素之後的所有元素都是空的。

對不起，你的時間球員，並感謝您的幫助:)。

來源

2016-09-07 15:06:07 Xelys

正確更新REDX應用程序中的所有狀態

回答

相關問題