Question

我有问题。我有一个简单的网格，网格从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？

Answer 1

如果你看一下.sort()实际做了什么says

sort（）方法对数组中的元素进行排序并返回数组

所以你的mapStateToProps实际上正在改变状态。在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)

第一个将更改原始数组，第二个不会。

Redux状态发生了变化但不应该发生变化

1 个答案: