Redux使用redux-thunk

时间:2017-08-22 23:47:48

标签: reactjs redux react-redux

假设有2个日期选择器对象与开始日期和结束日期相对应。

这些作为状态存在,所以为了设置它们,你必须调用setStartDate或setEndDate然后reducer选择并简单地设置状态。

假设我还有一个名为getHugeListFromServer的异步操作(REQUEST,SUCCESS,FAILURE),并使用参数getHugeListFromServer(startDate,endDate)调用。

每次用户选择日期时,我都想调用getHugeList函数并更新列表。如果我做这样的事情,它不起作用,因为在reducer设置日期变量之前调用后端动作。

example_container.jsx

 class example extends React.Component {
... Methods
  onChangeStartDate (startDate) {
    this.props.setStartDate(startDate);
    this.props.getHugeListFromServer(startDate,  this.props.example.endDate);
  } 
  // similar method for endDate. 
} 

我安装了redux thunk并且它仍然无法解决我的问题。我想让setDate操作的reducer在调用后端操作之前返回一个promise并在容器中解析它,但我敢打赌,有更好的方法可以解决这个问题。

有人可以伸手吗?谢谢!

1 个答案:

答案 0 :(得分:0)

  

我考虑过让setDate操作的reducer返回一个promise并在调用后端操作之前在容器中解析它,但我打赌这是一个更好的方法来解决这个问题。

我认为这听起来不合理。事实上,使用redux,这可能是完全正常的,可能是首选。

但是,如果您愿意,可以查看一些组件的生命周期方法,例如componentWillUpdate() - 这将在每次状态即将更新时调用。因此,您可以按原样保留处理程序,但只需从中移除this.props.getHugeListFromServer(...)并将其放在componentWillUpdate()挂钩内 - 请查看下面的文档链接以查看如何实现它的示例。

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/tapping_into_componentwillupdate.html

相关问题