Redux可观察的节气门Ajax仅满足某些条件

Question

在我的reactjs redux应用程序中，我epics对ajax请求使用redux可观察的中间件来取消某些请求。

const epicRequest = $actions => {
  return $actions
         .ofType(MY_ACTION_TYPE)
         .debounceTime(500)
         .switchMap( action =>{
            // Doing Ajax
          })
} 

我的问题是我按下某些按钮时会调用此动作，我有两种按钮都可以调用相同的动作，在这种情况下，如果第一个动作和第二个动作的调用是不同的按钮，我不想去抖动，我想仅当操作来自同一按钮时才反跳。

Answer 1

要解决此问题，您必须从按钮调用中传递额外的道具，并从史诗中检查该道具。

在您的组件按钮内单击调用，传递您的按钮标识。

onclick = () => {
  // assume arg name is 'from'
  this.props.yourAction('a') // can be 'a'/'b' ...
}

在操作调用中，传递从按钮调用中获得的值。

const yourAction = (from) => {
  return { type: MY_ACTION_TYPE, from }
}

减速器开关盒内

case MY_ACTION_TYPE:
  return {...state, from:action.from}

最后，在您的史诗中间件函数中，将其替换.debounceTime(600)为.debounce()，这样您就可以将函数作为返回的参数传递Observable.timer()。所以你可以在这里检查你的道具并返回去抖时间。

let from = null
const epicRequest = $actions => {
    return $actions
        .ofType(MY_ACTION_TYPE)
        //.debounceTime(500)
        .debounce((action) => {
            // check button type is not yet set or not previous type
            const  timer = !from || (from !== action.from)  ? Observable.timer(0) : Observable.timer(600)
            // update button type
            from =  (from !== action.from) ? action.from : from
            // return Observable.timer()
            return timer
        })
        .switchMap( action =>{
            // Do your Ajax
        })
}