Redux狀態更改，但不應該

我有問題。我有一個簡單的網格，網格從redux狀態獲取數據。但是當我排序的時候，我注意到我的數據在狀態上發生了變化，在這一點上它不應該或者我錯過了對redux的理解。這裏一些代碼Redux狀態更改，但不應該

減速器：

const gridOptions = { 
columns: ["id", "name", "lastname"], 
data: [ 
    {id: 1, name: "test", lastname: "test2"}, 
    {id: 2, name: "test1", lastname: "test3"} 
], 
sortBy: {}, 
filter: {} 
} 

const rootReducer = combineReducers({ 
data: function (state = gridOptions.data, action) { 
    return [...state]; 
}, 
selectedRow: function (state = {}, action) { 
    switch (action.type) { 
    case "ROW_SELECTED": 
    return action.data 
    default: 
    return state 
} 
}, 
sortBy: function (state = gridOptions.sortBy, action) { 
switch (action.type) { 
    case "SORT_CHANGE": 
    return Object.assign({}, action.column); 
    default: 
    return state; 
} 
}, 
columns: function (state = gridOptions.columns, action) { 
return state; 
}, 
filter: function (state = gridOptions.filter, action) { 
    return state; 
} 
}) 

const store = createStore(rootReducer);

容器組件。我知道這有點亂。

var mapStateToProps = (state) => { 
return { 
    data: (() => { 
    if (!state.sortBy) { 
    return state.data 
    } else { 
    return state.data.sort() 
    } 
    })(), 
    selectedRow: state.selectedRow, 
    sortBy: state.sortBy 
} 
} 

var mapDispatchToProps = (dispatch) => { 
return { 
    onRowSelected: data => dispatch({type: "ROW_SELECTED", data}), 
    onSortChange: column => { 
    dispatch({type: "SORT_CHANGE", column}) 
    }, 
    onFilter: filterText => { 
    dispatch({type: "FILTER_CHANGE", filterText}) 
    } 
} 
}

所以，現在的問題。由於某種原因，我不明白...如果我console.log state.data ...每當它被排序，state.data得到突變......這不會發生。但真正的問題是。爲什麼？還是我誤解了redux？

來源

2016-07-12 Daniel

如果你看看什麼.sort()實際上做它says

的sort（）方法排序數組的元素到位並返回數組

所以你mapStateToProps實際上是改變狀態。沒有什麼可以阻止你這樣做，你必須照顧自己不變的狀態。

這應該通過使用（例如）

return [...state.data].sort()

或者一些其他的方式排序之前克隆陣列來解決。

可以通過運行這兩條線和比較輸出

var a = [2,1]; console.log(a.sort()); console.log(a) 
var a = [2,1]; console.log([...a].sort()); console.log(a)

第一個將改變原來的陣列，所述第二不會在瀏覽器控制檯複製此。

來源

2016-07-12 12:22:01 ivarni

非常感謝你......它的工作。我測試了它，如果排序功能是問題，但我出來的消極。也許我忽略了一些東西。但是，謝謝。它的工作 – Daniel

很高興它的工作。添加了將演示此行爲的最小代碼，您可以從F12控制檯運行它並觀察輸出。 – ivarni

我做到了......我可以發誓我沒有看到原地排序。但確定:)繼續前進.. – Daniel

Redux狀態更改，但不應該

回答

相關問題