react使用Immutable处理redux数据

什么是immutable?

简而言之，Immutable数据就是一旦创建，就不能更改的数据。每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。对于Immutable的好处及介绍，大家可以参考Immutable 详解及 React 中实践，这篇文章介绍的很清楚。

因为Immutable的官方文档有点晦涩难懂，本文只是用来整理Immutable常用的API的使用，便于使用与查询，想了解更详细的内容，请戳这里~

Immutable 的几种数据类型

import { Map, is } from 'immutable'
const map1 = Map({ a: 1, b: 1, c: 1 })
const map2 = Map({ a: 1, b: 1, c: 1 })
map1 === map2   //falseObject.is(map1, map2) // falseis(map1, map2) // true

数据读取

get() getIn()

作用：获取数据结构中的数据

has() hasIn()

作用:判断是否存在某一个key

Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,'b']) //true

数据修改

注：这里对于数据的修改，是对原数据进行操作后的值赋值给一个新的数据，并不会对原数据进行修改，因为Immutable是不可变的数据类型。

set()

作用：设置第一层key、index的值

delete()

作用：用来删除第一层结构中的属性

deleteIn()

用来删除深层数据，用法参考setIn

更新数据

update()

作用：对对象中的某个属性进行更新，可对原数据进行相关操作

参考文章：https://segmentfault.com/a/1190000010676878?utm_source=tag-newest

redux简单应用

import { INPUT_FOCUS } from '../actionTypes'
import { fromJS } from 'immutable';
const defaultState = fromJS({
    focused: false
})
export default (state = defaultState, action) => {
    if (action.type === INPUT_FOCUS) {

        return state.set('focused', !state.get('focused'))
    } else {
        return state
    }
}

组件取值

const mapStateToProps = (state) => {
    console.log(state)
    return {
        focused: state.header.get('focused')
    }
}
const mapDispatchToProps = {
    change_focus
}
export default connect(mapStateToProps, mapDispatchToProps)(Header);