不可變更新模式 · redux中文文檔

# 不可變更新模式在 [redux 基本概念的不可變數據管理](PrerequisiteConcepts.html) 中給出一些示例，演示了不可變的基本更新操作，例如，更新一個對象中一個字段，或者，在數組的末尾增加一個數據。然而，reducer 經常需要綜合使用這些基本操作去處理更加復雜的任務。下面是一些你可能必須去實現的常見任務的例子。 ## 更新嵌套的對象更新嵌套數據的關鍵是**必須適當地復制和更新嵌套的每個級別**。這往往是那些學習 redux 一個難以理解的概念，當試圖更新嵌套對象的時候，有一些具體的問題會經常出現。這些意外的導致了直接變化，應該被避免。 ##### 常見錯誤 #1：指向同一對象的新變量定義一個新變量不會創建一個新的實際對象，它只創建另一個引用到同一個對象。這個錯誤的示例如下： ```javascript function updateNestedState(state, action) { let nestedState = state.nestedState // 錯誤: 這將導致直接修改已經存在的對象引用-不要這么做! nestedState.nestedField = action.data return { ...state, nestedState } } ``` 這個函數正確返回了頂層狀態對象的淺復制，但是變量 `nestedState` 依然指向已經存在的對象，這個狀態被直接修改了。 ##### 常見錯誤 #2：僅僅在一個層級上做淺復制這個錯誤的另外一個常見版本的如下所示： ```javascript function updateNestedState(state, action) { // 問題: 這僅僅做了淺復制！ let newState = { ...state } // 錯誤: nestedState 仍然是同一個對象! newState.nestedState.nestedField = action.data return newState } ``` 做一個頂層的淺復制是**不**夠的 - `nestedState` 對象也應該被復制。 ##### 正確方法：復制嵌套數據的所有層級不幸的是，正確地使用不變的更新去深度嵌套狀態的過程很容易變得冗長難讀。更新 `ate.first.second[someId].fourth` 的示例大概如下所示： ```javascript function updateVeryNestedField(state, action) { return { ...state, first: { ...state.first, second: { ...state.first.second, [action.someId]: { ...state.first.second[action.someId], fourth: action.someValue } } } } } ``` 顯然，每一層嵌套使得閱讀更加困難，并給了更多犯錯的機會。這是其中一個原因，鼓勵你保持狀態扁平，盡可能構建 reducer。 ## 在數組中插入和刪除數據通常，一個 Javascript 數組中內容使用變化的函數來修改，例如，`push` , `unshift`, `shift` 。因為我們不想在 reducer 中直接修改狀態，這些通常應該被避免。正因如此，你可能會看到 “插入” 和 “刪除” 的行為如下所示： ```javascript function insertItem(array, action) { return [ ...array.slice(0, action.index), action.item, ...array.slice(action.index) ] } function removeItem(array, action) { return [...array.slice(0, action.index), ...array.slice(action.index + 1)] } ``` 但是，請記住，關鍵是原始內存中的引用沒有被修改。**只要首先我們做了復制，我們就可以安全的變化這個復制。** 請注意，這個對于數組和對象都是正確的，但嵌套的數據仍然必須使用相同的規則更新。這意味著我們也可以編寫插入和刪除函數如下所示： ```javascript function insertItem(array, action) { let newArray = array.slice() newArray.splice(action.index, 0, action.item) return newArray } function removeItem(array, action) { let newArray = array.slice() newArray.splice(action.index, 1) return newArray } ``` 刪除函數也可以是這樣： ```javascript function removeItem(array, action) { return array.filter((item, index) => index !== action.index) } ``` ## 在一個數組中更新一個項目更新數組的一項可以使用 `Array.map`, 返回我們想要更新那項的一個新值，和其他項原先的值： ```javascript function updateObjectInArray(array, action) { return array.map((item, index) => { if (index !== action.index) { // 這不是我們關心的項-保持原來的值 return item } // 否則, 這是我們關心的-返回一個更新的值 return { ...item, ...action.item } }) } ``` ## 不可變更新工具庫因為編寫不可變的更新代碼可能變得乏味，所以有許多工具程序庫試圖抽象出這個過程。這些庫在 API 和用法上有所不同，但都試圖提供一種更短和更簡潔的方式來編寫這些更新。例如，[Immer](https://github.com/mweststrate/immer) 使不可變更新成為一個簡單的函數和純 JavaScript 對象： ```js var usersState = [{ name: 'John Doe', address: { city: 'London' } }] var newState = immer.produce(usersState, draftState => { draftState[0].name = 'Jon Doe' draftState[0].address.city = 'Paris' //nested update similar to mutable way }) ``` 有些，像 [dot-prop-immutable](https://github.com/debitoor/dot-prop-immutable) ，使用字符串路徑作為命令： ```javascript state = dotProp.set(state, `todos.${index}.complete`, true) ``` 其他的，例如 ?[immutability-helper](https://github.com/kolodny/immutability-helper) （現在過時的 React 不可變助手插件的一個復制），使用嵌套數據和助手函數： ```javascript var collection = [1, 2, { a: [12, 17, 15] }] var newCollection = update(collection, { 2: { a: { $splice: [[1, 1, 13, 14]] } } }) ``` 這些可以有效的替代了手寫不可變更新邏輯。許多不可變更新工具的列表可以在 ?[Immutable Data#Immutable Update Utilities](https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities)? 的 ?[Redux Addons Catalog](https://github.com/markerikson/redux-ecosystem-links) 部分找到。