React實戰——immutable 和 數據管理

前言：如果某一天，組件1裏的數據 data， 組件2突然需要使用，而這時候再把，被組件1私有化的data放到store中，會比較麻煩，所以建議所有數據在一開始就放到store

目錄：

1、immutable
2、根store
3、子store
4、結果

1、immutable

1. 下載包 —— npm install immutable redux-immutable
2. Immutable Data 就是一旦創建，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操作都會返回一個新的 Immutable 對象，且這個新對象是深拷貝得到的
3. 把一個數據變成 immutable 數據

import {fromJS} from 'immutable'

// 注：這個數據是一個對象
const 數據名 = fromJS( 數據 )

4. 得到 immutable 裏面的某個數據

// 注意鍵名是字符串

// 取單層的值
immutable數據名.get( 鍵名 )

// 取多層的值
1、 immutable數據名.get( 第一層鍵名 ).get( 第二層鍵名 )
2、 [immutable數據名].getIn([ 第一層鍵名， 第二層鍵名 ])

5. 設置 immutable 裏面的某個數據 —— 設置完後會返回一個新的 immutable 數據

// 注意鍵名是字符串
// 如果新的數據是數組或對象，但不是immutable類型，記得先把他變爲 immutable 數據再設置

// 設置一個
immutable數據名.set( 鍵名, 鍵值 )

// 設置多個
immutable數據名.set( 鍵名, 鍵值 ).set( 鍵名, 鍵值 )
immutable數據名.merge({
	鍵名1: 鍵值1,
	鍵名2: 鍵值2
})

// 以追加的方式設置
immutable數據名.get( 鍵名 ).concat( 數據 )

2、根store —— 用於管理全部組件中的store

1. 根 store 的目錄結構

• src/store
  • index.js —— 根store輸出的總出口
  • reducer.js —— 連接管理子store的文件

2. reducer.js 的配置

import {combineReducers} from 'redux-immutable' // 合併多個子組件的數據到總store中
import {reducer as headerReducer} from '../common/header/store' //header子組件的store

// 合併
const reducer = combineReducers({
    header: headerReducer
})

export default reducer

3. 把 reducer.js 導入到 index.js 中

import {createStore, compose} from 'redux'
import reducer from './reducer'

// 這是爲了使用 redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
        reducer,
        composeEnhancers() 
    )

export default store

3、子store

1. 子 store 的目錄結構

• src/store —— 在 src 文件夾下創建 store
  • index.js —— 子store輸出的總出口
  • reducer.js —— 子store的reducer管理文件
  • actionCreators.js —— 子store的action管理文件

2. 在 reducer.js 中定義所需要的數據和處理

import {fromJS} from 'immutable'
const defaultStore = fromJS({
    [數據]
})

export default (state = defaultStore, action) => {
	switch(action.type){
		case '自定義的類型1': 
			return ...
		case '自定義的類型2':
			return ...
		 default:
		 	return state
	}
}

3. 通過 actionCreator.js 管理 action 創建

export const xxxAction = () => ({
    type: '自定義類型'，
    data: 數據
})

export const xxxAction = ...

4. 將上述的兩個導出到組件的 index.js 下

import * as actionCreator from './actionCreator'
import reducer from './reducer'


export { reducer, actionCreator}

4、結果