react之路：使用immutable管理store中的數據

github倉庫地址：https://github.com/wanghao12345/react-book

簡介

immutable能夠將store中的數據封裝成一個immutable對象，這個對象擁有get，set等方法，這樣就能夠經過這些方法對store中的數據進行管理

使用

1.安裝immutable依賴

npm install immutable --save 或者  yarn add immutable

2.store中引入

import { fromJS } from 'immutable'

3.使用get方法

在mapStateToProps中獲取state數據時：

 1 /**
 2  * 將倉庫的state映射到props(獲取state)
 3  * @param state
 4  */
 5 const mapStateToProps = (state) => {
 6     return {
 7         // 沒有使用immutable
 8         // focused: state.header.focused
 9         // 使用了immutable
10         focused: state.header.get('focused')
11     }
12 }

4.使用set方法

 1 import * as constants from './constants'
 2 
 3 import { fromJS } from 'immutable'
 4 
 5 // fromJS將一個js對象轉化成immutable對象
 6 const defaultState = fromJS({
 7     focused: false
 8 })
 9 
10 export default (state = defaultState, action) => {
11 
12     if (action.type === constants.SEARCH_FOCUS) {
13         // 沒有使用immutable
14         // return {
15         //     focused: true
16         // }
17 
18         // 使用了immutable
19         // immutable對象的set方法，會結合以前的immutable對象的值
20         // 和設置的值，返回一個全新的對象
21         return state.set('focused', true)
22     }
23 
24     if (action.type === constants.SEARCH_BLUR) {
25         // 沒有使用immutable
26         // return {
27         //     focused: false
28         // }
29 
30         // 使用了immutable
31         return state.set('focused', false)
32     }
33 
34     return state
35 }