zoukankan      html  css  js  c++  java
  • [Redux] Understand Redux Higher Order Reducers

    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.

  • 相关阅读:
    几句话总结一个算法之DQN
    几句话总结一个算法之Q-Learning与Sarsa
    几句话总结一个算法之Policy Gradients
    深度图像特征在推荐和广告中的应用(三)
    深度图像特征在推荐和广告中的应用(一)
    Kaggle实战之二分类问题
    Kaggle实战之一回归问题
    Deep Learning 论文解读——Session-based Recommendations with Recurrent Neural Networks
    Scala 中的函数式编程基础(三)
    Scala 中的函数式编程基础(二)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7524321.html
Copyright © 2011-2022 走看看