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()按照我上面的描述来研究过滤.