immutable用法
Immutable 详解及 React 中实践

所有数据出入state用Immutable类型

1.安装

yarn add immutable --save
yarn add redux-immutable --save

2.改变 reducer合并方式

// 原本方式，reducer 里面处理的是原生的js
// import {combineReducers} from 'redux'

// reducer 处理的是 immutable 格式的数据
import { combineReducers } from 'redux-immutable'

import homeRedux from './homeReduce'
import contactRedux from './contactReduce'
import momentRedux from './momentReduce'
import mineRedux from './mineReduce'
import routeRedux from './routeReduce'

const AppReducer = combineReducers({
    homeRedux,
    contactRedux,
    momentRedux,
    mineRedux,
    routeRedux
});

export default AppReducer

import * as Action from '../constance/actionType';
import Immutable from 'immutable'

const initState = Immutable.fromJS({
    abc: '默认值'
});

export default (state = initState, action)=>{
    switch (action.type){
        case Action.ACTION_IMMUTABLE:
            // 进来数据为 Immutable 类型
            return state.set('abc',Immutable.fromJS(action.payload));
            break;

        default:
            return state;
    }
}

3.在page中

function mapStateToProps(state) {
    // 出去数据为  Immutable  getIn:得到深层次的数据,get:得到单层的数据
    console.log('home state:',state.toJS());
    return {
        abc: state.getIn(['homeRedux','abc'])
    }
}

❗️注

所有数据出入state用Immutable类型（必须）

在redux中，全局state必须是immutable的，这点毋庸置疑是我们使用immutable来优化redux的核心

组件props是通过redux的connect从state中获得的，并且引入immutableJS的另一个目的是减少组件shouldComponentUpdate中不必要渲染，shouldComponentUpdate中比对的是props，如果props是原生JS就失去了优化的意义

组件内部state如果需要提交到store的，必须是immutable，否则不强制

page提交到action中的数据必须是immutable

Action提交到reducer中的数据必须是immutable

网络请求下来的数据必须转成 immutable （非必须）

优化shouldComponentUpdate

注❗️：组件的props数据是immutable类型
注❗️：组件的props数据是immutable类型
注❗️：组件的props数据是immutable类型

优化shouldComponentUpdate方式一：baseComponent

//baseComponent.js   component的基类方法

import React from 'react';
import {is} from 'immutable';

class BaseComponent extends React.Component {
    constructor(props, context, updater) {
        super(props, context, updater);
    }

    shouldComponentUpdate(nextProps, nextState) {
        const thisProps = this.props || {};
        const thisState = this.state || {};
        nextState = nextState || {};
        nextProps = nextProps || {};

        if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
            Object.keys(thisState).length !== Object.keys(nextState).length) {
            return true;
        }

        for (const key in nextProps) {
            if (!is(thisProps[key], nextProps[key])) {
                return true;
            }
        }

        for (const key in nextState) {
            if (!is(thisState[key], nextState[key])) {
                return true;
            }
        }
        return false;
    }
}

export default BaseComponent;
  组件中如果需要使用统一封装的shouldComponentUpdate，则直接继承基类

import BaseComponent from './BaseComponent';
class Menu extends BaseComponent {
    constructor() {
        super();
    }
    …………
}

优化shouldComponentUpdate方式二：使用官方提供的react-addons-pure-render-mixin + Immutable