iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
0
Modern Web

從0到100打造一個React Native boilerplate系列 第 16

Day 16 / Redux -- ImmutableJS

  • 分享至 

  • xImage
  •  

ImmutableJS

<好讀版>

前言

這章要講的是 immutableJS,是一種特殊的資料儲存方式,而且是由 Facebook 開源的專案。他因為有一些良好的特性,所以被使用在我們的專案之中。

Immutable object vs plain object

Immutable object 和 plain object 相比,有以下幾個較為優勢的特點:

  1. 變數一但成為 immutable object,他就不能再被改變,call 任何 immutable js 的 API 來改變它都會再回傳一個新的 immutable object。 這代表著每一個immutable 的 function 都是一個 pure function。我們可以在程式碼的各個地方輕鬆 console.log(),而不用去管是不是有被其它段程式碼不小心改到。

  2. 數據是被鎖住的,避免在任意情況下,不經意的被修改,也就能保證我們的數據是我們想要的,而不會發生臭蟲。

  3. 擁抱functional programming。

然而相比之下,immutableJS 的特點便是需要另一個學習成本來了解 immutable 的 API。

其它關於 immutable 的優勢和介紹,可以看延伸閱讀2。

架構

在我們的架構之下,所有的 initialState 都是使用 immutable object。我們使用 immutable 提供的 record 來設定 initial state。檔案的位置放在 src/reducers/XXX/XXXInitialState.js。一層一層的關係都是事先定義好的。

const Form = Record({
  state: REGISTER,
  disabled: false,
  isFetching: false,
  fields: new (Record({
    username: '',
    usernameHasError: false,
    usernameErrorMsg: '',
  }))(),
})

接著我們會在 reducer 內引入這個檔案。如果我們不是使用 immutablejs,那麼 reducer 會長這個樣子。

switch (action.type) {
  case SET_HOTEL_TYPE:
	return {
		...state,
		hotelType: action.payload.type
	}
}

寫成這個樣子有一個缺點,便是可讀性較低,容易有臭蟲產生。相比之下,我認為以下這種寫法比可讀性比較高。

export default function customReducer(state = initialState, action) {
  if (!(state instanceof InitialState)) return initialState.mergeDeep(state)
  switch (action.type) {
    case SET_HOTEL_TYPE:
      return state.setIn(['hotelType'], action.payload.type)

    case SET_TRIP_LOCATION:
      return state.setIn(['tripLocation'], action.payload.tripLocation)
  }
  return state
}

延伸閱讀

  1. Immutable.js 簡介
  2. 簡述 Immutable js 和 React中的實踐
  3. Record

上一篇
Day15 / Redux -- MapStateToProps & MapDispatchToProps & Connect
下一篇
Day 17 / Redux -- Middleware
系列文
從0到100打造一個React Native boilerplate30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言