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( 数据 )

6. 删除数组中的某一项

// index 从0开始
immutable数据名.delete(index)

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、结果