Как правильно сделать фильтрацию списка в Redux?

Question

[strannik_k]

Пробовал сделать фильтрацию в Redux.
Пока наилучшим решением вижу делать фильтрацию так же, как это делается в обычном React.js без Redux. Т.е. в дочерний компонент передается родительская функция, в которой изменяется state родительского компонента.
Пришел к выводу, что редьюсеры здесь не стоит использовать, т. к. состояние store не меняется. К тому же, если его изменить, то не получиться отобразить один список в нескольких компонентах с разной фильтрацией.

Пример моего решения написан ниже. Я хотел узнать - является ли такой подход к фильтрации правильным в Redux или есть лучше, правильней?

Родительский компонент (контейнер):

handleFilterUpdate(filterType, filterValue ){
    this.setState({ filterType: filterType, filterValue: filterValue });
}

render () {
    const listItems = this.props.listItems;
    return (
        <div>
            <MyFilter onFilterUpdate={this.handleFilterUpdate.bind(this)} />
            <List items={getFilteredItems(listItems, this.state.filterType, this.state.filterValue)}/>
        </div>
    );
}

Дочерний компонент MyFilter:

handleClick(e) {
    this.props.onFilterUpdate('filter_type', this.refs.filterInput.value);
}

render() {
    return (
        <div>
            <input type="text" ref = "filterInput"/>
            <button onClick={this.handleClick.bind(this)}>Apply filter</button>
        </div>
    );
}

Answer 1

[Никита Гущин]

Храните тип фильтра в store а не в state. Затем фильтруйте из общего массива по этому фильтру во время mapStateToProps (изменение фильтра - это экшн). При этом не плохо бы использовать reselect.

function mapStateToProps(state) {
  const filter = state.something.filter
  const items = state.other.items
  return {
    items: filterItems(items, filter)
  } 
}
connect(mapStateToProps)(...)

Comments

[strannik_k]

А если будет нужно вывести список несколько раз на странице, причем с разными фильтрами? Получается, что для каждой копии одного и того же компонента нужно будет в store заводить свою переменную (или сразу массив) для хранения фильтра конкретного компонента.

[Никита Гущин]

strannik_k: да. Будет что-то в стиле state = { filters: { [componentId]: filter } } . У меня для этого сделан одтельный мини-модуль, который занимается хранением всех UI-данных

[strannik_k]

Никита Гущин: Спасибо за ответы!

В целом понятно как делать. По сути, нужно писать модуль, который будет хранить данные о состоянии каждого компонента, у которого оно есть. К тому же должен быть функционал удаление/добавление данных в store при создании/удалении компонентов.

Странно, что это не сделано в самом фреймворке. Ведь в любом более-менее крупном проекте придется с этим столкнуться.

[Никита Гущин]

strannik_k: обращайтесь.
Концепция такая. Разработчик сам собирает свой "фреймворк" из того, что ему нужно.