我正在学习react/redux,并且有一个具有两个主要状态部分的应用程序:
- 项目数组
- 包含用户指定的这些项目过滤器的对象
我有三个函数/操作,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?或者我应该尝试完全不同的模式?
最佳答案
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()
中的过滤上面写了。
关于javascript - React/Redux,使用 Redux Thunk 实现多个操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36637059/