【Redux Saga炼金笔记】1秒内点击3次按钮触发事件

最新推荐文章于 2023-06-15 16:49:49 发布

原创最新推荐文章于 2023-06-15 16:49:49 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react #redux #redux-saga

react 同时被 3 个专栏收录

16 篇文章

订阅专栏

redux

5 篇文章

订阅专栏

redux-saga

2 篇文章

订阅专栏

配方

effects: race, take, call

流程

首次点击按钮开始计时
如果1秒内再点击2次则触发三连击事件
未完成三连击则触发超时事件

实现

1 按钮点击时dispatch一个CLICK的action

function Test ({handleClick}) {
  return (
    <div>
      Click 3 times in one second.
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

Test = connect(
  () => ({}),
  (dispatch) => ({
    handleClick () {
      dispatch({type: 'CLICK'});
    }
  })
)(Test);

2 使用take监听CLICK

function *clickWatcher () {
  while (true) {
    yield take('CLICK');
  }
}
store.runSaga(clickWatcher);

3 在监听到第一个CLICK之后，启动race，竞争者为一个1秒的delay任务和一个take两次CLICK的任务

function *clickWatcher () {
  while (true) {
    yield take('CLICK');

    const {timeout, success} = yield race({
      timeout: call(delay, 1000),
      success: call(function * () {
        yield take('CLICK');
        yield take('CLICK');
        return true;
      })
    });
  }
}

4 delay任务胜出则超时，反之发动三连击技能

function *handleTripleClick () {
  alert('Woh~');
}
function *handleTimeout () {
  alert('GAME OVER');
}

function *clickWatcher () {
  while (true) {
    yield take('CLICK');

    const {timeout, success} = yield race({
      timeout: call(delay, 1000),
      success: call(function * () {
        yield take('CLICK');
        yield take('CLICK');
        return true;
      })
    });
    if (success) {
      yield call(handleTripleClick);
    } else {
      yield call(handleTimeout);
    }
  }
}

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