日記3(immutable.js)

immutable.js

• 資料

  github, 手冊

• 背景

  今天在專案中看到了自己曾在reducer中有這樣一部分程式碼：

    import { fromJS } from 'immutable';
    import { PENDING, FULFILLED, REJECTED } from 'redux-promise-middleware';
    import * as at from './actionTypes';

    const INITIAL_STATE = fromJS({
      list: [],
      pagination: {
        pageSize: 20,
        total: 0,
        page: 1,
      },
      loading: false,
    });

    export default (state = INITIAL_STATE, action) => {
      switch (action.type) {
        case `${at.GET_USE_RESULT}_${FULFILLED}`:
            return state
                .update('list', () => fromJS(action.payload.data.list))
                .update('pagination', val =>
                    fromJS(
                        Object.assign({}, val.toJS(), {
                            total: action.payload.data.total,
                        })
                    )
                )
                .set('loading', false)
        default:
            return state;複製程式碼

上面對程式碼的問題就在於自己更新pagination.total值的方式。儘管語法沒什麼問題但是看著總覺得非常彆扭，於是翻了一下手冊找到了setIn來代替，改進了更新total的方式如下：

    case `${at.GET_USE_RESULT}_${FULFILLED}`:資料
        return state
            .update('list', () => fromJS(action.payload.data.list))
            .updateIn(['pagination', 'total'], action.payload.data.total)
            .set('loading', false)複製程式碼

• 問題--為什麼要用immutable.js

  react專案中為什麼要使用Immutable.js,它能實現的功能我明明用原生的js都能實現啊！恩，理由就是它效能更好！但是為什麼呢，以前的自己也沒有去具體的查過，就想當然的覺得效能更好所以就使用它。今天補了相關知識瞭解到主要原因有以下2點：

  1. JS的深淺複製

      JS的深淺複製講起來得很久很久了，半壺水的自己今天也補了一下這方面的知識。
      深複製一般是開闢一塊新的記憶體地址，將原物件的各個屬性逐個遞迴複製出去。
      淺複製，新舊物件則是指向同一塊記憶體地址。複製程式碼

  2. React DIff演算法

      這方面更是半壺水了，瞭解過能侃侃而談但似乎沒什麼用[逃]～～複製程式碼

• 學習

  瀏覽了一遍手冊，避免以後再遇到類似問題。
  儘量優先使用immutable已有方法，畢竟更加安全可靠方面複製程式碼

---

工作小插曲

繼昨天的工作小插曲後，今天專案組開了一個AAR(after action review)會，總結了一下昨天的事故。一方面是怎麼發生的如何避免以後發生。另一方面則是事故發生後我們怎麼處理！昨天我們專案組知道發生事故的那一刻起，先是笑，然後是查原因和責任人，大概過了接近20分鐘才在公司的大群裡面發了聲音！”公關“得不夠及時，沒有分清事情發生後的輕重緩急！現在想想也是，事故發生後第一反應應該是怎麼解決造成的後果承擔責任，然後再查明原因避免再犯！

---

明日計劃

• node.js錯誤捕獲與處理(半路殺出的immutable阻斷了計劃)