React / Redux, реализация нескольких действий с Redux Thunk

0

Я изучаю реакцию/сокращение и имею приложение с двумя основными частями:

  1. Массив элементов
  2. Объект, который содержит определенные пользователем фильтры для этих элементов

У меня есть три функции/действия, createFilter, updateFilter и deleteFilter которые изменяют состояние # 2. У меня есть action filterItems который изменяет # 1 на основе состояния # 2. Поэтому, когда # 2 изменяется, это действие нужно отправить.

Это компонент, с которым я работаю:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { createFilter } from '../actions/actions'
import { updateFilter } from '../actions/actions'
import { deleteFilter } from '../actions/actions'
import { filterItems } from '../actions/actions'

class ItemList extends Component {

 createFilter(input) {
       this.props.createFilter(input)
       this.props.filterItems()
    }

    updateFilter(input) {
       this.props.updateFilter(input)
       this.props.filterItems()
    }

    deleteFilter() {
       this.props.deleteFilter()
       this.props.filterItems()
    }

    ...
    // Render method
    ...
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ createFilter, updateFilter, deleteFilter, filterItems }, dispatch)
}

function mapStateToProps({ itemList }) {
    return { itemList }
}

export default connect(mapStateToProps, mapDispatchToProps)(ItemList)

Я обнаружил, что при отправке одного из методов фильтра хранилище (состояние # 2) еще не обновляется с помощью filterItems().

Поэтому мне нужно асинхронно выполнять функции фильтра, и как только в хранилище будут обновлены filterItems вызовов.

Я борюсь за то, как это сделать с react-thunk. Если первая функция была обещанием ajax, я бы использовал .then():

export function updateFilterAndEvaluate(input) {
    return (dispatch, getState) => {
        updateFilter(input).then(dispatch(filterItems(getState().filters)))
    }
}

Но это просто функции и не имеют метода.then(). Я пытаюсь выяснить, каков мой лучший курс действий для этой реализации. Могу ли я перенести действия Redux в обещание? Я злоупотребляю Thunk? Или я должен попробовать другой шаблон целиком?

  • 1
    Почему updateFilter не возвращает обещание?
Теги:
redux
redux-thunk

1 ответ

6
Лучший ответ

У меня есть action filterItems, который изменяет # 1 на основе состояния # 2.

Это, вообще говоря, анти-шаблон. Поскольку массив результатов можно вычислить из исходного массива и активных фильтров, вы не должны хранить его в состоянии.

Действия Redux обычно должны выглядеть как "события" (например, что произошло). "Фильтр был создан" и "фильтр обновлен" - это хорошие действия. "Отфильтруйте их сейчас!" больше похоже на команду, это обычно признак того, что она не должна была быть действительной в первую очередь и должна быть чем-то, что делают компоненты, когда они выбирают данные для рендеринга.

Вместо этого выполните фильтрацию как часть функции mapStateToProps() при подготовке данных для компонентов. Если это дорого, изучите использование Reselect для эффективного вычисления полученных данных.

Что касается вашего конкретного вопроса,

Я обнаружил, что при отправке одного из методов фильтра хранилище (состояние # 2) еще не обновляется с помощью фильтра timeItems().

Это неверно и указывает на некоторые другие проблемы в вашем коде. (Трудно сказать, где, потому что пример неполный). В Redux функция dispatch() является синхронной (если у вас нет промежуточного программного обеспечения, которое задерживает или выполняет пакет, что обычно не так), поэтому вам не нужно "ждать", чтобы оно закончилось, если оно просто работает с локальными данными.

Однако в любом случае filterItems() не очень подходит для действия, и я предлагаю вам изучить фильтрацию в mapStateToProps() как я писал выше.

  • 1
    Круто, спасибо! Это имеет смысл. У меня есть рабочая версия этого путем фильтрации в методе mapStateToProps компонента. В качестве последующего вопроса, что, если элементы проходят через фильтры, они модифицируются фильтрами? Тогда они должны были бы быть отправлены в действии, чтобы обновить хранилище с их новым измененным состоянием правильно?
  • 2
    Зачем фильтрам изменять элементы? Я не понимаю вариант использования. Если они просто «форматируют» некоторые вещи, которые временно изменяются во время применения фильтра, я ожидаю, что mapStateToProps копирует все, что нужно изменить, и передает это как подпорки. mapStateToProps никогда не может отправлять действия, это должна быть чистая функция.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню