Сортировка элементов массива через Redux

Question

Я хотел бы реализовать сортировку элементов, чтобы при нажатии на кнопку компонент сразу перерисовывался отсортированным. Ниже привожу свой код, но он не работает. Вот мои экшены: `

const usersLoaded = (persons) => {
    return {
        type: 'PERSONS_LOADED',
        usersload: persons
    };
};

const sortByName = () => {
    return {
        type: 'SORT_BY_NAME'
    }
}

export {
    usersLoaded,
    sortByName
};`

Вот редьюсер: `

const initialState = {
    persons: []
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'PERSONS_LOADED':
            return {
                persons: action.usersload
            };
        case 'SORT_BY_NAME':
            const sortedData = state.persons.sort((a, b) => a.name > b.name ? 1 : -1);
            return {
                persons: sortedData
            }
        default:
            return state;
    }
}

export default reducer;

`

Вот сам компонент приложения: `

  import React from 'react';
import {connect} from 'react-redux';
import {usersLoaded, sortByName} from './actions';

class App extends React.Component {
    componentDidMount() {
        fetch('http://localhost:3000/persons')
        .then(res => res.json())
        .then(res => this.props.usersLoaded(res))
    }
    render() {
        const {users,sortByName} = this.props;
        const persons = users.map((person, index) => {
            return (
                <li key={index}>
                    Имя: {person.name} <br></br>
                </li>
            );
        });
        return (
            <div className="main">
                <ul>{persons}</ul>
                <button onClick={() => sortByName()}>По имени</button>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        users: state.persons
    }
}

const mapDispatchToProps = {
    usersLoaded,
    sortByName
};

export default connect(mapStateToProps, mapDispatchToProps) (App);

`

Answer 1

case 'SORT_BY_NAME':
   const = state.persons.map(a => a)
   return {
     persons: personsCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
   }

Добавьте для тернарного оператор очевидный return, "()". И так же обратите внимание, что метод sort не вернёт вам новый массив, он мутирует текущий. Даже если вы создали const sortedData и вызвали sort()в state так же поменяется массив, потому что в константе только ссылка на массив, а не копия. Создавайте сначала копию массива методами map или filter, а потом сортируете. https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/sort.

БЛОГ НА HUSL

Сортировка элементов массива через Redux

Ответы (1 шт):