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. 使用css让文字两端对齐

    text-align:justify; text-justify:distribute-all-lines; text-align-last:justify;可以让文字实现两端对齐

  2. vue小荔枝,时间控件,动态按月份增减。

    依赖框架有jq,bootstrap3.0,vue2.0; 自封装(搬运)时间控件,bootstrap-datetimepicker.资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个 ...

  3. gulp-connect插件浏览器实时同步刷新

    1.在站点路径里打开cmd控制台. 输入:cnpm install gulp-connect --save-dev 2.编辑gulpfile.js 3.控制台执行gulp任务 输入gulp serve ...

  4. java 连接 kerberos 认证的 HBase 和 HDFS

    这是两个功能,都很简单就写一块了.. 简单到什么程度呢,简单到只贴代码就可以了... HBase package com.miras.data; import org.apache.hadoop.co ...

  5. npoi的用法,动态的判断单元格的大小,设置列的宽度

    public MemoryStream GridToExcelByNPOI(DataTable dt, string strExcelFileName) { HSSFWorkbook wk = new ...

  6. JS中==与===操作符的比较

    摘要: ===操作符: 要是两个值类型不同,返回false 要是两个值都是number类型,并且数值相同,返回true 要是两个值都是stirng,并且两个值的String内容相同,返回true 要是 ...

  7. 543. Diameter of Binary Tree【Easy】【二叉树的直径】

    Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...

  8. WSDL格式浅析

    其中,WSDL是一种 XML 格式,用于将网络服务描述为一组端点,这些端点对包含面向文档信息或面向过程信息的消息进行操作.这种格式首先对操作和消息进行抽象描述,然后将其绑定到具体的网络协议和消息格式上 ...

  9. SNOI2017(BZOJ5015~5018)泛做

    T1:礼物 想错方向了,实际上很简单. 我想的是:显然题目求的是$\sum_{i=1}^{n} i^{k}2^{i}$,然后或许可以通过化式子变成与n无关的复杂度? 然后就不停往斯特林数反演和下降幂的 ...

  10. [USACO13NOV]No Change

    题目大意: 你有k(k<=16)个硬币,每个硬币都有自己的面值. 现在你要给n件商品付钱,每件商品也有自己的价格. 然而老板是个奸商,他绝对不会给你找钱. 你每次付钱只能用一个硬币,但是你可以一 ...