Redux 상태가 변경되었지만하지 않아야 함

Question

문제가 있습니다. 나는 간단한 그리드를 가지고 그리드는 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를 missunder합니까?

Answer 1

당신은 .sort() 실제로

그래서 당신의 mapStateToProps 실제로 배열을 says

정렬() 메소드 대신에 배열의 요소를 정렬을 수행하고 반환 무엇인지 살펴있는 경우 상태를 돌연변이. 당신이 이것을하는 것을 멈추게하는 redux에는 아무것도 없습니다. 당신은 당신 자신을 불변의 상태로 유지해야합니다.

이

은 선별 전에 배열을 복제

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) 

첫번째는 원래의 배열을 바꿀 것, 두 번째는하지 않습니다 이러한 두 줄을 실행하고 비교하여 브라우저 콘솔에서이를 복제 할 수 있습니다.