0

我正在学习 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 操作包装在一个 Promise 中吗？我在滥用 Thunk 吗？还是我应该完全尝试不同的模式？

4

1 回答 1

6

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

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

Redux 操作通常应该看起来像“事件”（例如发生了什么）。“过滤器已创建”和“过滤器已更新”是很好的操作。“现在过滤它们！” 看起来更像是一个命令，这通常表明它最初不应该是一个动作，而应该是组件在选择要呈现的数据时所做的事情。

mapStateToProps()相反，在为组件准备数据时，将过滤作为函数的一部分进行。如果它变得昂贵，请考虑使用 Reselect 来有效地计算派生数据。

至于你的具体问题，

我发现，当发送过滤器方法之一时，在调用 filterItems() 时，存储（状态＃2）尚未更新。

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

但是，无论如何，filterItems()它都不太适合某个动作，我建议您mapStateToProps()按照我上面写的那样考虑过滤。

于 2016-04-15T20:37:49.400 回答