Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps reducing the reducer logic.

In this lesson, we'll see how to reduce duplicated code by refactoring two different reducers into a higher order reducer.

Reducers:

export default (state = [], { type, payload }) => {
switch (type) {
case "ADD_ARTICLE":
return [...state, payload] default:
return state
}
}
export default (state = [], { type, payload }) => {
switch (type) {
case "ADD_USER":
return [...state, payload] default:
return state
}
}

They both share the same code structure.

HOC reducer:

which is a reducer hoc function return a reducer function.

import { combineReducers } from "redux"
import users from "./users"
import articles from "./articles" const addHoc = (reducer, predicate) => (state, action) => {
if (predicate(action.type)) {
return [...state, action.payload]
}
return reducer(state, action)
} const rootReducer = combineReducers({
users: addHoc(users, type => type === "ADD_USER"),
articles: addHoc(articles, type => type === "ADD_ARTICLE")
}) export default rootReducer

If match the predicate function, then we can compute the next state and return it. If doesn't match, then pass to the reducer normally. Then we can remove "ADD_USER" and "ADD_ARTICLE" cases from reducers.

Personally I don't think this is a good approach... even it reduce the boilerplate code, but it decrease the code readability. I still prefer keep all the reducer logic inside the its reducer file. Just make a reuseable function would be better:

export const append = (state, payload) => {
return [...state, payload]
} export default (state = [], { type, payload }) => {
switch (type) {
case "ADD_USER":
return append(state, payload) default:
return state
}
}

It also make Unit testings easier.

[Redux] Understand Redux Higher Order Reducers的更多相关文章

  1. [CS61A] Lecture 5&6&7. Environments & Design & Functions Examples & Homework 2: Higher Order Functions

    [CS61A] Lecture 5&6&7. Environments & Design & Functions Examples & Homework 2: ...

  2. [React] Higher Order Components (replaces Mixins)

    Higher order components will allow you to apply behaviors to multiple React components. So the idea ...

  3. [React] Implement a Higher Order Component with Render Props

    When making a reusable component, you'll find that people often like to have the API they're most fa ...

  4. [React Intl] Use a react-intl Higher Order Component to format messages

    In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...

  5. [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

    In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that ...

  6. 手把手教你撸一套Redux(Redux源码解读)

    Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...

  7. 记一次修改框架源码的经历,修改redux使得redux 可以一次处理多个action,并且只发出一次订阅消息

    redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...

  8. React-安装和配置redux调试工具Redux DevTools

    chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} f ...

  9. 25.redux回顾,redux中的action函数异步

    回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...

随机推荐

  1. 《Android编程权威指南》PhotoGallery应用梳理

    PhotoGalley是<Android编程权威指南>书中另外一个重要的应用.       

  2. spring xml配置文件根元素(文件头文件)说明

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. java httpRequest和Response

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...

  4. Aix下查看内存命令

    1. 查看物理内存配置 # lsdev -Cc memory  查看配置的物理内存设备,下面为其输出示例:  L2cache0 Available L2 Cache   mem0 Available ...

  5. 【Docker入门】

    目录 Linux容器 Docker的优势 Docker三大概念 安装使用Docker 补充知识 [Docker入门] 发布文章 "qq_41964425" @ *** 所谓Dock ...

  6. expr---计算工具

    expr命令是一款表达式计算工具,使用它完成表达式的求值操作. expr的常用运算符: 加法运算:+ 减法运算:- 乘法运算:\* 除法运算:/ 求摸(取余)运算:% 语法 expr(选项)(参数) ...

  7. 紫书 习题 10-44 UVa 11246 ( 容斥原理)

    把k的倍数的删去(k, 2k, 3k--),但是k^2不应该删去,因为k已经删去,所以不存在某个数乘上k之后为k^2 所以k^2可以留下,然后因为有k^2,所以k^3就是k^2的k倍,所以k^3要删去 ...

  8. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

  9. 【Uva 12105】Bigger is Better

    [Link]: [Description] 让你用最多n根棍子,组成一个数字,使得它能够被m整除; 数字1..9分别需要用-根棍子. 要求这个数字尽可能地大; 然后输出这个数字. [Solution] ...

  10. Linux学习总结(6)——CenterOS7安装mysql5.5的方法

    首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb,以下为卸载mariadb,安 ...