Sorting array of objects in Redux reducer

Question

I am trying to sort an array like this (my state):

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

I dispatch an action to the reducer: (part of reducer)

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

but it does not work. Could somebody tell me where the mistake is?

Reducer should not mutate a state. It must return a new state object and leave the previous one untouched. If you want to have sorting option, you have to add respective property (e.g. specifying sorting direction) to your state and sort data in render() depending on that property's value. — hindmost
– hindmost, Commented Aug 30, 2017 at 15:11
What exactly do you mean by "it doesnt work". This code doesn't contain any obvious bugs. — Håken Lid
– Håken Lid, Commented Aug 30, 2017 at 23:17

rmcsharry · Accepted Answer · 2019-10-01 14:46:48Z

18

The sorting function should work fine. But you should not mutate the original state in the reducer. You can create a copy of the state array by calling state.slice() before sorting.

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

Of course, you can define a simpler sort function as well.

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

edited Oct 1, 2019 at 14:46

rmcsharry

5,58111 gold badges74 silver badges117 bronze badges

answered Aug 30, 2017 at 22:58

Håken Lid

23.2k10 gold badges58 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joe Seifi Over a year ago

Array.slice does not do a deep copy, hence if you have a nested data structure you're still referencing original state

Håken Lid Over a year ago

@JoeSeifi Yes. The state of the child objects has not changed, only their order. There's no reason to prefer deep copying here.

Orhan · Accepted Answer · 2019-02-03 11:58:54Z

4

You need to do:

state.slice().sort(...

As sort() changes the original array by reordering references (mutates it) which is a "no go" for redux store. slice() first does a shallow copy meaning only references are copied and it is fast (unless it contains primitives in which case they will be copied, but it will still be fast) and then those new references are moved around by sort().

NOTE: you still can not change the objects within the array, but luckily sort does not change them.

answered Feb 3, 2019 at 11:58

Orhan

1,48514 silver badges12 bronze badges

Comments

LowCool · Accepted Answer · 2017-08-30 15:02:17Z

0

if you are using es6 you can try like this state.sort((a,b) => a.name - b.name);

answered Aug 30, 2017 at 15:02

LowCool

1,4415 gold badges31 silver badges55 bronze badges

Comments

Dan Mason · Accepted Answer · 2017-08-30 15:23:44Z

0

The Array.prototype.sort method requires you to return an integer or a boolean.

The below shows how to order in either direction.

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

edited Aug 30, 2017 at 15:23

answered Aug 30, 2017 at 15:07

Dan Mason

2,3371 gold badge18 silver badges38 bronze badges

1 Comment

hindmost Over a year ago

Have you read the article you linked? compareFunction may return any number, not true or false.

Collectives™ on Stack Overflow

Sorting array of objects in Redux reducer

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related