Меня несколько смущает то, как определенный массив сортируется функцией сокращения. У меня есть список сотрудников, который мне нужно отсортировать по именам.

Например, у меня в состоянии редуктора по умолчанию:

сотрудники = [Нейт, Джон, Майкл]

На экране, где отображается эта опора, я создаю console.log, когда компонент монтируется, и получаю:

[Нейт, Джон, Майкл]

Вот где это становится странным. У меня есть функция onPress, которая меняет порядок в списке по алфавиту. Я также записываю в консоль значение списка на экране (перед запуском действия), в действии (где выполняется сортировка) и в редукторе. Console.log ДО срабатывания действия возвращает отсортированный список.

reorderList() {
  if(this.props.employees){
      console.log("SCREEN", this.props.employees);
      this.props.reorderList(this.props.employees);
  }
}

Возврат:

ЭКРАН: [Джон, Майкл, Нейт]

Это как если бы действие происходит до console.log, но я не понимаю, как это возможно, если я не понимаю синхронность функций RN.

Вот функция внутри действия, которая сортирует список. Я поместил ту же функцию в редуктор, и журналы действий / экранов по-прежнему возвращают преждевременно отсортированный массив.

export const reorderList = (employees) => {
    console.log("ACTION", employees); // returns "ACTION: [John, Michael, Nate]"
    var items = employees;
    employees.sort(function(a, b){
        var nameA = a.name.toUpperCase();
        var nameB = b.name.toUpperCase();
        if (nameA < nameB) {
            return -1;
        }
        if (nameA > nameB) {
            return 1;
        }
        return 0;
    });
    return {
        type: "reorder_list",
        payload: items
    }
}

Кажется, я что-то неправильно понимаю в Redux?

1
Nathanael 20 Ноя 2018 в 23:50

1 ответ

Лучший ответ

Скорее всего, вы стали свидетелем хорошо известного недостатка в JS (и других языках программирования). А именно, метод sort одновременно изменяет массив за this на месте и возвращает this.

Чтобы исправить это, нужно скопировать массив в items и отсортировать его, оставив employees нетронутым:

const items = [...employees]
items.sort((a,b) => a.localeCompare(b) )

PS. Рекомендую поместить код сортировки в редуктор.

1
Elias Toivanen 20 Ноя 2018 в 21:00