在 Redux reducer 中对对象数组进行排序

Question

我正在尝试对这样的数组进行排序（我的状态）：

[
  {
    name:"Aenean in justo ante"
  },
  {
    name:"Phasellus viverra mattis dolor"
  }
]

我向减速器发送一个动作：（减速器的一部分）

case 'SORT_COLLECTION':
  return state.sort(function(a, b) {
    var nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0;
  })

但它不起作用。 有人能告诉我错误在哪里吗？

Answer 1

排序功能应该可以正常工作。 但是你不应该改变reducer中的原始状态。 您可以通过在排序前调用state.slice()来创建state数组的副本。

case 'SORT_COLLECTION':
  return state.slice().sort(function(a, b) {
    var nameA = a.name.toLowerCase(),
      nameB = b.name.toLowerCase()
    if (nameA < nameB)
      return -1
    if (nameA > nameB)
      return 1
    return 0
  })

当然，您也可以定义更简单的排序函数。

 const state = [{name:'foo'},{name:'bar'},{name:'baz'}] const sortByKey = key => (a, b) => a[key] > b[key] ? 1 : -1 const sorted = state.slice().sort(sortByKey('name')) console.log(`state=${JSON.stringify(state)}\\nsorted=${JSON.stringify(sorted)}`)

Answer 2

你需要做：

state.slice().sort(...

由于sort()通过重新排序引用（改变它）来更改原始数组，这对于 redux 存储来说是“不行的”。 slice()首先做一个浅拷贝，这意味着只复制引用并且它很快（除非它包含基元，在这种情况下它们将被复制，但它仍然会很快）然后这些新引用通过sort() 。

注意：您仍然无法更改数组中的对象，但幸运的是 sort 不会更改它们。

Answer 3

Array.prototype.sort方法要求您返回一个integer或一个boolean 。

下面显示了如何在任一方向订购。

 var arr = [ { name:"Aenean jon justo ante" }, { name:"Aenean in justo ante" }, { name:"Phasellus viverra mattis dolor" } ] console.log("Alphabetical:", arr.sort((a,b) => a.name > b.name)); console.log("Reversed:", arr.sort((a,b) => a.name < b.name));

Answer 4

如果您使用的是 es6，您可以尝试这样state.sort((a,b) => a.name - b.name);