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

来源：互联网发布：短信转移软件编辑：程序博客网时间：2024/04/27 19:31

配方

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);    }  }}

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>.


0 0