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数据时：

/**
 * 将仓库的state映射到props(获取state)
 * @param state
 */
const mapStateToProps = (state) => {
    return {
        // 没有使用immutable
        // focused: state.header.focused
        // 使用了immutable
        focused: state.header.get('focused')
    }
}

4.使用set方法

import * as constants from './constants'

import { fromJS } from 'immutable'

// fromJS将一个js对象转化成immutable对象
const defaultState = fromJS({
    focused: false
})

export default (state = defaultState, action) => {

    if (action.type === constants.SEARCH_FOCUS) {
        // 没有使用immutable
        // return {
        //     focused: true
        // }

        // 使用了immutable
        // immutable对象的set方法，会结合之前的immutable对象的值
        // 和设置的值，返回一个全新的对象
        return state.set('focused', true)
    }

    if (action.type === constants.SEARCH_BLUR) {
        // 没有使用immutable
        // return {
        //     focused: false
        // }

        // 使用了immutable
        return state.set('focused', false)
    }

    return state
}