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. css3中rem和em是干嘛的

    css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...

  2. 2.AngularJS-验证

    转自:https://www.cnblogs.com/best/p/6225621.html 一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属 ...

  3. ADO.Net数据库帮助类

    public interface IDBHelper { /// <summary> /// 执行sql语句 /// </summary> /// <param name ...

  4. XFCE 桌面环境美化,fedora27系统

    一.添加RPM Fusion源,安装方法这里就不说了以前的文章里写过. 二.安装XFCE 主题管理器 xfce-theme-manager [root@Fedora ~]# dnf install x ...

  5. A电脑能ping 通B电脑,但B电脑无法ping能和访问B

    过程: A电脑共享了打印机,B电脑想连接A的打印机,发现拒绝访问,无法登录A电脑 问题: A电脑能ping 通B电脑,但B电脑无法ping能和访问B 原因:A电脑禁用了共享访问 处理:使用一键共享设置 ...

  6. boost.property_tree的高级用法(你们没见过的操作)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前一阵写项目,终于将这个boost下的xml读取类完成了,由于网上对property_trees的讲解很少,最多也就到get_child这个层面, ...

  7. 这是一套Java菜鸟到大牛的学习路线之高级教程,由工作了10年的资深Java架构师整理。

    这是一套Java菜鸟到大牛的学习路线之高级教程,由工作了10年的资深Java架构师整理.        01-java高级架构师设计-基础深入        J2SE深入讲解        Java多 ...

  8. Resize图片

    在网站上传图片的时候,提示图片太大了. 有5种方式来调整图片大小 http://www.wikihow.com/Resize-a-JPEG picresize.com 这个网站比较靠谱:使用Windo ...

  9. .Net 自动属性结合手动属性

    Model using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ...

  10. android 图片特效处理之锐化效果

    这篇将讲到图片特效处理的锐化效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理: 一.简单算法:分别获取当前像素点和八个周围像素点的RGB值,先求出当前像素点的RGB值与八个像素点RGB值的 ...