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

Question

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

项目数组
包含用户为这些项目指定的过滤器的对象

我有三个 functions/actions、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 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 动作通常应该看起来像“事件”（例如发生了什么）。 “过滤器已创建”和“过滤器已更新”是好的操作。 “现在过滤它们！”看起来更像是一个命令，这通常表明它一开始就不应该是一个动作，而应该是组件在 select 要呈现的数据时所做的事情。

相反，在为组件准备数据时，将过滤作为 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() 中的过滤。

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

React/Redux, implementing multiple actions with Redux Thunk

javascript

reactjs

redux

redux-thunk