javascript - 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)

我发现，当发送其中一种过滤器方法时，在调用 filterItems() 时，存储(状态 #2)尚未更新。

所以我需要异步执行过滤器函数，一旦存储更新，调用filterItems。

我正在努力思考如何使用 react-thunk 来做到这一点。如果第一个函数是 ajax promise ，我将使用 .then():

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

但这些只是函数，没有 .then() 方法。我正在尝试找出对于此实现我的最佳行动方案是什么。我可以将 Redux 操作包装在 Promise 中吗？我是否误用了 Thunk？或者我应该尝试完全不同的模式？

Answer 1

I have an action filterItems that modifies #1 based on the state of #2.

一般来说，这是一种反模式。由于结果数组可以从源数组和当前事件的过滤器中计算，因此您不应该将其保留在状态中。

Redux 操作通常应该看起来像“事件”(例如发生了什么)。 “过滤器已创建”和“过滤器已更新”是很好的操作。 “现在就过滤它们!”看起来更像是一个命令，这通常表明它首先不应该是一个操作，而应该是组件在选择要渲染的数据时执行的操作。

相反，当您为组件准备数据时，请将过滤作为 mapStateToProps() 函数的一部分进行。如果它变得昂贵，look into using Reselect to compute derived data efficiently .

至于你的具体问题，

What I have found is that when one of the filter methods are sent, the store (state #2) is not yet updated by the time filterItems() is called.

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

但是，无论如何，filterItems() 都不太适合操作，我建议您像我一样研究 mapStateToProps() 中的过滤上面写了。