zoukankan      html  css  js  c++  java
  • [Javascript] Simplify Creating Immutable Data Trees With Immer

    Immer is a tiny library that makes it possible to work with immutable data in JavaScript in a much more straight-forward way by operating on a temporarily draft state and using all the normal JavaScript API's and data structures. The first part of the lesson explains how to use Immer, and the second part of the lesson shows you how it can be used to simplify, for example, Redux reducers.

    Immer has a few unique features:

    • Supports arbitrary, deep modifications in immutable data trees
    • Strongly typed
    • Uses JavaScript native data structures, no new API to learn
    • Automatically freezes any data that is produced

    The whole point of Immer is that you can wrap you reducer function with the function immer provide, let's call 'produce'.  When you call it, if you don't do anything, it just return your previous state, if you do any partial mutation, if will keep original object untouched, instead creating immutable version return to you. therefore make code much simpler.

    // Before
    
    const byId = (state, action) => {
      switch (action.type) {
        case RECEIVE_PRODUCTS:
          return {
            ...state,
            ...action.products.reduce((obj, product) => {
              obj[product.id] = product
              return obj
            }, {})
          }
        default:
          return state
      }
    }
    // After
    
    import produce from 'immer'
    
    const byId = (state, action) =>
      produce(state, draft => {
        switch (action.type) {
          case RECEIVE_PRODUCTS:
            action.products.forEach(product => {
              draft[product.id] = product
            })
        }
      })

    Or an improved version:

    import produce from 'immer'
    
    const byId = produce((draft, action) => {
      switch (action.type) {
        case RECEIVE_PRODUCTS:
        action.products.forEach(product => {
            draft[product.id] = product
        })
      }
    })
  • 相关阅读:
    线索二叉树
    正则表达式之后向引用
    进步的阶梯
    树和二叉树
    java 执行 exe 文件
    Electron + Vue如何实现不同窗口之间的通信(项目总结 第一个)
    liunx 修改 ip 地址
    桌面快捷工具
    微信小程序长列表组件 recycle-view 修改,使其可以下拉刷新
    微信小程序 textarea 文本滚动不了的bug
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8285359.html
Copyright © 2011-2022 走看看