Redux-Status ändert sich aber sollte nicht

Question

Ich habe ein Problem. Ich habe ein einfaches Grid und das Grid bekommt seine Daten aus dem Redux-Zustand. Aber wenn ich sortiere, merke ich, dass sich meine Daten in dem Zustand ändern, den ich an dieser Stelle nicht oder nur zu gerne missverstanden habe. hier ein Stück Code

Minderer:

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); 

der Container-Komponente. Ich weiß, es ist ein bisschen unordentlich.

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}) 
    } 
} 
} 

So jetzt zu der Frage. Aus irgendeinem Grund verstehe ich nicht ... wenn ich die state.data console.log ... jedes Mal, wenn es sortiert wird, wird die state.data mutiert ... was nicht passieren soll. Aber die wirkliche Frage ist. Warum? Oder verstehe ich redux nicht?

Answer 1

Wenn Sie einen Blick auf, was .sort() es tatsächlich tut says

Die sort() -Methode, die Elemente eines Arrays in Ort sortiert und gibt das Array

Ihre So mapStateToProps tatsächlich ist den Staat mutieren. Es gibt nichts in redux, das dich davon abhält, dies zu tun, du musst dafür sorgen, dass der Zustand unveränderlich bleibt.

unter Verwendung von (zum Beispiel) gelöst wurden

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

oder einen anderen Weg, um die Anordnung zu klonen, bevor es das Sortieren Dies sollte.

Sie können dies in der Browser-Konsole replizieren, indem diese beiden Linien laufen und Vergleichen der Ausgabe

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

Die erste wird das ursprüngliche Array ändern, die zweite nicht.