[React + Functional Programming ADT] Create Redux Middleware to Dispatch Multiple Actions
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的更多相关文章
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [Functional Programming ADT] Combine Multiple State ADT Based Redux Reducers
Redux provides a convenient helper for combining many reducers called combineReducer, but it focuses ...
- [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 ...
- 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 ...
随机推荐
- Thinkphp图片水印和文字水印
1.Thinkphp图像处理 在TP框架中,我们经常用到图片上传,我最近写了很多关于图片上传的文章,thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成等文章,今天写一下关于图 ...
- Python3 文件读写r,w,a
# Author;Tsukasa ''' f = open('yesterday','w') #文件句柄...注意open分为‘r’读模式,‘w’写模式(d会先创建文件或者覆盖文件),‘a’为追加模式 ...
- SGU167 I-country
嗯以前在某个DP专题了发过这道题,但是当时没码代码,现在重发一篇题解 思考阶段如何划分:由已经处理的行数向下扩展,但是仅有行数我们无法描述状态空间那我们再加入已经选过的格子数,这样我们似乎可以确定我们 ...
- 使用Nginx的配置对cc攻击进行简单防御
ddos攻击:分布式拒绝服务攻击,就是利用大量肉鸡或伪造IP,发起大量的服务器请求,最后导致服务器瘫痪的攻击. cc攻击:类似于ddos攻击,不过它的特点是主要是发起大量页面请求,所以流量不大,但是却 ...
- 使用NGUI来制作技能的CD冷却效果
using System.Collections; using System.Collections.Generic; using UnityEngine; public class CDScript ...
- python 写文件write(string), writelines(list) ,读文件
read()方法用于直接读取字节到字符串中,可以接参数给定最多读取的字节数,如果没有给定,则文件读取到末尾. readline()方法读取打开文件的一行(读取下个行结束符之前的所有字节),然后整行,包 ...
- 【线性基】hdu3949 XOR
给你n个数,问你将它们取任意多个异或起来以后,所能得到的第K小值? 求出线性基来以后,化成简化线性基,然后把K二进制拆分,第i位是1就取上第i小的简化线性基即可.注意:倘若原本的n个数两两线性无关,也 ...
- 【主席树】Gym - 101237A - MEX-Query
主席树里每个值的位置存当前该值出现的最右位置. 如果root[r]的前缀主席树中,某值最右位置大于等于l,说明该值出现在了l,r中. 所以主席树维护区间最小值,如果左半值域的最小值<l,则说明左 ...
- Problem C: 调用函数,求a+aa+aaa+....+aa...aa(n个a)
#include <stdio.h> int fn(int a,int n)//定义函数 { ; ;i<=n;i++) { m=m+a;//当a=3时,m=3,然后a=30,m=33 ...
- NHibernate官方文档中文版--拦截器和事件(Interceptors and events)
对于应用程序来说,能够对NHibernate内部发生的事件做出响应式很有用的.这能够有助于实现一些类的功能或者扩展NHibernate的功能. 拦截器 IInterceptor接口提供了应用程序ses ...