zoukankan      html  css  js  c++  java
  • [React + Functional Programming ADT] Create Redux Middleware to Dispatch Actions with the Async ADT

    We would like the ability to group a series of actions to be dispatched with single dispatching functions used as handlers in various parts of our game. The only issue with that, is that animations and other design elements in our game require us to provide some temporal space between each of those actions in the series being fired.

    This is something we can achieve by reaching for the Async ADT provided by the crocks library. In order to allow for Asyncs in our Redux flow we are going to need to create some middleware that can identify when an Async is provided as an action, and then handle it appropriately .

    Here we have dispatched three action on game start:

    const mapDispatch = dispatch => ({
      answer: unit,
      restart: unit,
      start: () => dispatch([
        startGame(),
        hideAllCards(),
        startTurn()
      ]),
    })

    Now that we want is after we call 'startGame', we should give players 5 second to remember each cards, then we dispatch 'hideAllCards' & 'startTurn' actions.

    We can use Async ADT for this:

    import Async from 'crocks/Async'
    
    const mapDispatch = dispatch => ({
      answer: unit,
      restart: unit,
      start: () => dispatch([
        startGame(),
        Async.resolveAfter(5000, hideAllCards()),
        Async.resolveAfter(5600, startTurn()),
      ]),
    })

    It is not enough for the program to working yet, because Redux by default expect sync opreation, not async opreation, to take async operation, we need async middleware:

    import Async from 'crocks/Async'
    import compose from 'crocks/helpers/compose'
    import isSameType from 'crocks/predicates/isSameType'
    
    export const errAction = payload => ({
      type: 'ASYNC_ERROR', payload, error: true
    })
    
    export default function asyncMiddleware({dispatch}) {
      return next => action => 
        isSameType(Async, action) ? 
          action.fork(compose(next, errAction),  dispatch) : //fork(reject, resolve)
          next(action)
    }

    Last apply the middleware:

    import { createStore, applyMiddleware, compose } from 'redux'
    
    import asyncMiddleware from './middleware/async'
    import multiMiddleware from './middleware/multi'
    
    import reducer from './reducers'
    import { initialState } from './model/initialize'
    
    const middleware = applyMiddleware(
      asyncMiddleware,
      multiMiddleware
    )
    
    const composeEnhancers =
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
    
    export default createStore(
      reducer,
      initialState(),
      composeEnhancers(middleware)
    )
  • 相关阅读:
    使用循环计算斐波那契数列
    java 面向过程实现万年历
    学习js回调函数
    序列化和反序列化
    SQL语句增加字段、修改字段、修改类型、修改默认值
    使用SQL语句查询日期(当月天数,当月第一天,当月最后一天,本年最后一天,当月第一个星期) 日期转字符串
    RGB颜色表
    String 与StringBuilder有什么区别
    C# byte数组与Image的相互转换
    CentOS 7 MySQL、Tomcat、Zookeeper设置开机自启
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10366829.html
Copyright © 2011-2022 走看看