We only have a few dispatching functions that need to be known by our React Application. Each one actually has multiple actions that need to be dispatched. While we could just have many imperative calls to dispatch in our dispatching functions, but why not use it as an excuse to use an array and write some middleware.

We will create a middleware function that will check dispatched actions to see if they are arrays. If a given action is an array we loop over the array, dispatching each action in turn. If it is not however, we just pass it along to be handled downstream.

Create a middle which can take dispatch fns as array type:

function multiMiddleware({ dispatch }) {
return next => action => {
return isSameType(Array, action)
? action.forEach(a => dispatch(a))
: next(action);
};
}

Apply the middle:

import { createStore, compose, applyMiddleware } from "redux";
function multiMiddleware({ dispatch }) {
return next => action => {
return isSameType(Array, action)
? action.forEach(a => dispatch(a))
: next(action);
};
} const middleware = applyMiddleware(multiMiddleware);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; export default createStore(
reducer,
initialState(),
composeEnhancers(middleware)
);

Previously, we can only apply one dispatch fn:

start: () => dispatch(startGame())

Now we can dispatch multi actions:

start: () => dispatch([startGame(), hideAllCards()])

[React + Functional Programming ADT] Create Redux Middleware to Dispatch Multiple Actions的更多相关文章

  1. [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 func ...

  2. [React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application

    With our Redux implementation lousy with State ADT based reducers, it is time to hook it all up to a ...

  3. [Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer

    With a well defined demarcation point between Redux and our State ADT based model, hooking up to a R ...

  4. [Functional Programming ADT] Initialize Redux Application State Using The State ADT

    Not only will we need to give our initial state to a Redux store, we will also need to be able to re ...

  5. [Functional Programming ADT] Create State ADT Based Reducers (applyTo, Maybe)

    The typical Redux Reducer is function that takes in the previous state and an action and uses a swit ...

  6. [Functional Programming ADT] Adapt Redux Actions/Reducers for Use with the State ADT

    By using the State ADT to define how our application state transitions over time, we clear up the ne ...

  7. [Functional Programming ADT] Combine Multiple State ADT Based Redux Reducers

    Redux provides a convenient helper for combining many reducers called combineReducer, but it focuses ...

  8. [Functional Programming ADT] Debug a Functional JavaScript composeK Flow

    When using ADTs in our code base, it can be difficult to use common debugging tools like watches and ...

  9. Functional Programming without Lambda - Part 1 Functional Composition

    Functions in Java Prior to the introduction of Lambda Expressions feature in version 8, Java had lon ...

随机推荐

  1. Python Unicode与中文处理(转)

    Python Unicode与中文处理 python中的unicode是让人很困惑.比较难以理解的问题,本文力求彻底解决这些问题: 1.unicode.gbk.gb2312.utf-8的关系: htt ...

  2. CSS3主要的几个样式笔记

    1.边框:border-color:    设置对象边框的颜色.     使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X ...

  3. 19. Remove Nth Node From End of List【Medium】【删除单链表倒数第n个结点】

    Given a linked list, remove the n-th node from the end of list and return its head. Example: Given l ...

  4. 【20181020T1】蛋糕

    题面 [正解] 显然先按a排个序,然后用b乱搞 第一问用D开头的定理求最长下降子序列 第二问乱搞 for (int i=1;i<=n;i++) { int* t=upper_bound(f+1, ...

  5. 【计算几何】【凸包】【极角排序】【二分】Gym - 101128J - Saint John Festival

    平面上n个红点,m个黑点,问你多少个黑点至少在一个红三角形内. 对红点求凸包后,转化为询问有多少个黑点在凸包内. 点在凸多边形内部判定,选定一个凸包上的点作原点,对凸包三角剖分,将其他的点极角排序之后 ...

  6. 【(博弈)dfs序+树状数组】BZOJ2819-Nim

    [题目大意] 普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游戏是有必胜策略的.现在对每一堆编号1,2,3,4,...n,在 ...

  7. python基础之数据类型,交互,格式化输出,基本运算符

    数据类型 1.什么是数据类型? 变量值才是我们存的数据,所以数据类型指的是变量值的种类 2.为何数据要分类? 变量值是用来保存现实世界中的状态的,那么针对不同的状态,就应该用不同类型的数据去表示 3. ...

  8. 数据库之mysql的基本操作

    1 数据库 1.1 数据库介绍 为什么要有数据库? 数据需要大量的存储,把数据永久保存下来,可以保存到文件中,当然也可以保存到数据库中. 数据库:通俗的说,存储数据的仓库,是管理数据的文件夹:存放数据 ...

  9. 抽象类(abstract class)和接口(interface)的异同

    抽象类和接口都不能够实例化,但可以定义抽象类和接口类型的引用.一个类如果继承了某个抽象类或者实现了某个接口都需要对其中的抽象方法全部进行实现,否则该类仍然需要被声明为抽象类. 接口比抽象类更加抽象,因 ...

  10. iOS 常用工具库LFKit功能介绍

    简介:LFKit包含了平时常用的category,封装的常用组件,一些工具类. 需要LFKit中所有自定义控件的pod 'LFKit/Component' 需要LFKit中所有category的pod ...