React Component не рендерится после сортировки массива в хранилище

Question

Я изучаю React и Redux и следую инструкциям на сайте Redux.Я пытаюсь добавить функцию, которая позволяет пользователю сортировать задачи по имени, дате и т. Д. Проблема в том, что список задач не перерисовывается при сортировке массива задач.state.sortBy отправляется другим компонентом, и он работает.Я ясно вижу, что массив отсортирован по логу store.getState() на консоли.И компонент, конечно, подписан на магазин.

Массив меняется.Когда я сортирую по «дате», она сортируется по дате.Когда я сортирую по «имени», он сортируется по имени.Но компонент списка задач игнорирует его и не перерисовывает.

Вот код для компонента контейнера списка задач:

import { connect } from 'react-redux'
import TodoList from '../components/TodoList'
import { toggleTodo } from '../actions'

const sortTodos = (todos, sortBy) => {
  switch (sortBy) {
    case "date":
      return todos.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
    case "name":
      return todos.sort((a, b) => {
        if (a.name < b.name)
          return -1
        if (a.name > b.name)
          return 1
        return 0
      })
    default:
      return todos
  }
}

const mapStateToProps = (state) => ({
  todos: sortTodos(state.todos, state.sortBy)
})

const mapDispatchToProps = (dispatch) => ({
  onTodoClick: (id) => dispatch(toggleTodo(id))
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

А вот компонент представления:

import React from 'react'
import Todo from './Todo'

const TodoList = ({ todos, onTodoClick }) =>
  <ul>
    {todos.map((todo) =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>

export default TodoList

Я перепробовал пару вещей, и у меня все получилось, но я думаю, что это не правильный способ сделать это.Когда я добавил .slice(0, -1) к оператору возврата функции sortTodos, компонент перерисовался.

const sortTodos = (todos, sortBy) => {
  switch (sortBy) {
    case "date":
      return todos.sort((a, b) => Date.parse(b.date) - Date.parse(a.date)).slice(0, -1)
.
.
.

Спасибо за помощь

Answer 1

sort выполняет сортировку массива на месте (изменяет сам массив). Вам нужно сделать копию перед сортировкой. Например

todos.slice(0).sort((a, b) => Date.parse(b.date) - Date.parse(a.date))

или

[...todos].sort((a, b) => Date.parse(b.date) - Date.parse(a.date))