如何在React组件中按顺序调用Redux Saga实现先增后减？

当然可以实现这个需求！不用额外折腾太多，只需要调整现有代码的结构就能搞定，咱们一步步来：

核心思路 #

你写的func()是个Saga generator函数，这类函数不能直接在组件的onClick里调用——因为它们需要由Redux-Saga中间件来管理执行。所以最规范的做法是：新建一个专属的action来触发这个“先增后减”的流程，然后在Saga里监听这个action并执行对应的逻辑。

修改Redux部分代码 #

首先在action_creators里添加一个新的action：

export const action_creators = {
  increase_number: createAction('increase_number'),
  decrease_number: createAction('decrease_number'),
  set_number_success: createAction('set_number_success'),
  increase_then_decrease: createAction('increase_then_decrease') // 新增这个action
};

然后添加对应的Saga worker函数，并把它加入到根Saga里：

// 新增这个worker函数，实现先增后减的逻辑
function* increaseThenDecrease() {
  yield put(action_creators.increase_number());
  // 注意：take需要传入action的type字符串，而不是action实例
  yield take('set_number_success'); 
  yield put(action_creators.decrease_number());
}

export function* saga() {
  yield all([
    takeEvery('increase_number', increase_number),
    takeEvery('decrease_number', decrease_number),
    takeEvery('increase_then_decrease', increaseThenDecrease) // 监听新增的action
  ]);
}

修改Component部分代码 #

把新增的action绑定到组件props里，并给第三个按钮添加点击事件：

function map_dispatch_to_props(dispatch) {
  return bindActionCreators({
    increase_number: action_creators.increase_number,
    decrease_number: action_creators.decrease_number,
    increase_then_decrease: action_creators.increase_then_decrease // 绑定新action
  }, dispatch);
}

class App extends React.PureComponent {
  render() {
    return [
      <div key="number">{this.props.number}</div>,
      <button key="inc" type="button" onClick={() => this.props.increase_number()}>increase_number</button>,
      <button key="dec" type="button" onClick={() => this.props.decrease_number()}>decrease_number</button>,
      <button key="inc-dec" type="button" onClick={() => this.props.increase_then_decrease()}>increase_number and decrease_number</button>
    ]
  }
}

关键细节说明 #

• 你原来的func()里take(action_creators.set_number_success())写法有误：take接收的是action类型字符串（比如'set_number_success'），而不是调用action creator生成的实例，所以要改成yield take('set_number_success')。
• 通过新增action触发Saga流程的方式，完全符合Redux的单向数据流规范，也让逻辑更清晰、易于维护。

内容的提问来源于stack exchange，提问作者left click