React/ Redux，使用Redux Thunk实现多个操作

Question

我正在学习一个react/redux，并有一个包含两个主要状态的应用程序：

1. 一组项目
2. 包含这些项的用户指定筛选器的对象。

我有三个函数/操作：createFilter、updateFilter和deleteFilter，它们修改#2的状态。我有一个操作filterItems，它根据#2的状态修改#1。所以每当#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？还是我应该尝试一种完全不同的模式？

Answer 1

我有一个动作filterItems，它根据#2的状态修改#1。

一般来说，这是一种反模式。由于结果数组可以从源数组和当前活动过滤器中计算，所以不应该将其保持在状态。

Redux操作一般应该看起来像“事件”(例如发生了什么)。“过滤器被创建”和“过滤器被更新”是很好的动作。“现在过滤！”看起来更像一个命令，这通常是一个信号，表明它本来不应该是一个动作，并且应该是组件在选择要呈现的数据时所做的事情。

相反，在为组件准备数据时，将过滤作为mapStateToProps()函数的一部分。如果价格贵的话，研究如何使用Reselect来高效地计算派生数据。

至于你的具体问题，

我发现，当发送一个筛选方法时，在调用filterItems()时，还没有更新存储(状态2)。

这是不正确的，并指出了您的代码中的其他问题。(因为这个例子不完整，所以很难说出是在哪里)。在Redux中，dispatch()是同步的(除非您有一些中间件延迟或批处理它--通常情况并非如此)，因此，如果只对本地数据进行操作，则不需要“等待”它才能完成。

但是，在任何情况下，filterItems()都不是一个非常适合于操作的方法，我建议您研究一下mapStateToProps()中的过滤，我在上面已经写过了。