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状态更改，但不应该

回答

相关问题