react-immutable

2018-12-30

2018年最后来一篇react的文章

1.如何在react中使用immutable

1	npm i immutable --save

2.在redux中使用immutale转化js数据

import Immutable from 'immutable'
const initialState = Immutable.fromJS({
    campus:[],
    selectedCampus:{name: "axiba", number:10}
})

immutable对象是不可变的,每一个都是全新的对象

3.如何在reducer中编写代码

export default function(state=initialState, action){
    console.log('mngbgbgbgdd');
    switch(action.type){
        case 'GET_CAMPUS':
           console.log('immutable');
           return state.set('campus', Immutable.fromJS(action.campus));
        case 'SET_NUMBER':
           return state.setIn(['selectedCampus', 'number'], action.number);   
        case 'ADD_CAMPUS':
           return state.update('campus', (campuses) => campuses.push(Immutable.fromJS(action.campus)));
        default:
           return state;      
    }
}

4.看到这里你需要对immutable的数据结构需要一点了解

  ////List
const list = List([ 'a', 'b', 'c' ])
const result = list.update(2, val => val.toUpperCase())
///Map
const aMap = Map({ key: 'value' })
const newMap = aMap.update('key', value => value + value)

5.react后续操作页面数据获取

const configureStore = () => (applyMiddleware(thunk)(createStore)(reducer, initialState));
const mapStateToProps = state => ({
     cc: state.reducer2.getIn(['selectedCampus', 'name']),
     number: state.reducer2.getIn(['selectedCampus', 'number']),
     campus: state.reducer2.get('campus')
});
// 视图渲染
{
     this.props.campus.size ? (
         this.props.campus.map((v,i) => (
             <div key={i}>{v.get('name')}</div>
         ))
     ) : null
}
export default connect(mapStateToProps)(Mayi);

6.使用immutable的优点

var oddSquares = Immutable.seq.of(1,2,3,4,5,6,7).filter(
    x => {
        console.log('immutable对象的 filter执行')；
        return x % 2
    }
).map(x => x*x)
oddSquares.get(1);

猜猜上述 filter会执行多少次答案是3次, 为什么不是7次。。。