【Redux Saga炼金笔记】做一个可以重试N次的action

最新推荐文章于 2022-05-15 19:47:38 发布

一韬

最新推荐文章于 2022-05-15 19:47:38 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/awaw00/article/details/54617767

版权

react 同时被 3 个专栏收录

16 篇文章 2 订阅

订阅专栏

redux

5 篇文章 0 订阅

订阅专栏

redux-saga

2 篇文章 0 订阅

订阅专栏

配方

action: redoable
effects: put, take, takeEvery

流程

点击按钮，执行sayHello的action
sayHello的action只有执行第3次的时候才会成功
如果sayHello失败则自动重试直到成功或到达重试次数

实现

1 先定义一个redoable的action creator

/**
 * @params action: 需要被重试的标准action
 * @params successType: 当action成功后会被dispatch的action type
 * @params failureType: 当action失败后会被dispatch的action type
 * @params time: 重试最大次数
 */
function redoable(action, successType, failureType, time = 1) {
  return {
    type: 'REDOABLE',
    payload: {
      successType,
      failureType,
      action,
      time
    }
  };
}

2 点击按钮时dispatch一个REDOABLE的SAY_HELLO的action

function Hello({
  handleSayHello
}) {
  return (
    <div>
      <button onClick={handleSayHello}>Say Hello</button>
    </div>
  );
}

Hello = connect(
  () => ({}),
  (dispatch) => ({
    handleSayHello() {
      dispatch(redoable({
        type: 'SAY_HELLO'
      }, 'SAY_HELLO_SUCCESS', 'SAY_HELLO_FAILURE', 3));
    }
  })
)(Hello);

3 实现sayHello的saga来处理SAY_HELLO的action

function* sayHello(action) {
  times++;
  if (times < 3) {
    yield put({
      type: 'SAY_HELLO_FAILURE'
    });
    return;
  }

  times = 0;
  alert('Hello, nice to meet you!');
  yield put({
    type: 'SAY_HELLO_SUCCESS'
  });
}

4 实现redoableInvoke的saga来处理REDOABLE的action

function* redoableInvoke(action) {
  const {
    action: realAction,
    successType,
    failureType,
    time
  } = action.payload;

  yield put(realAction);
  const {type} = yield take([successType, failureType]);
  if (type === failureType) {
    if (time === 0) {
      return;
    }
    const nextAction = {...action};
    nextAction.payload = {...nextAction.payload, time: time - 1};
    yield put(nextAction);
  }
}

5 使用takeEvery来运行两个saga

store.runSaga(function * () {
  yield takeEvery('REDOABLE', redoableInvoke);
  yield takeEvery('SAY_HELLO', sayHello);
});

height="265" width="100%" scrolling="no" title="Redux Saga Cookbook 02" src="//codepen.io/awaw00/embed/BppVgJ/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen <a href="http://codepen.io/awaw00/pen/BppVgJ/">Redux Saga Cookbook 02</a> by aaron wang (<a href="http://codepen.io/awaw00">@awaw00</a>) on <a href="http://codepen.io">CodePen</a>.
