一、作用
immutable
对象是不可直接赋值的对象,它可以有效的避免错误赋值的问题
二、安装
$ npm install immutable
三、使用
在react中,immutable主要是防止state对象被错误赋值。
将js对象转成immutable对象
import { Map } from 'immutable';
const defaultState = Map({
todoList: []
});
获取属性
state.get('todoList'); // 获取store中的todoList
state.get(['Main', 'todoList']); // 获取Main组件中store的todoList
改变属性
state.set('todoList', action.value); // 设置单个属性值
// 设置多个属性
state.merge({
todoList: fromJS(action.value), // 由于action.value是js对象所以要转成immutable对象
});
1、fromJs
将普通JS对象和数组转为Immutable的Map和List。(Deeply)
注:使用Js对象构造Immutable Map时,Js对象的属性总是字符串的。
2、is
判断两个对象是否有相同的值。
3、hash
返回31位整数值,此方法用来决定两个值是否相同以及如何存储这些值。
4、isImmutable
判断对象是否是immutable的。
5、isCollection
判断对象是否是集合(collection)或集合的子类(Map、List、Set等)。
三、List API
let List = Immutable.List;
0、toJS
将List转为JS对象。
1、List
用传递的参数创建一个新的List。
2、isList
判断参数是否是List。
3、of
用传递的参数创建一个新的List。
4、size
5、set
按索引给List设置值,索引为负数时为从后往前数。
6、delete
按索引删除元素,索引为负数时为从后往前数。
7、insert
在指定的位置上插入元素。
8、clear
清空List。
9、push
10、pop
11、shift
返回删除List的第一个元素的新List。
12、unshift
返回在List头部插入一个新元素的新List。
13、update
返回更新了指定索引上元素值的新List,第二个参数(可选)表示当此索引上的元素没有被设置值时的默认值。
14、setIn
按keyPath设置值
15、deleteIn
按keyPath删除元素
16、concat
17、map
18、filter
19、filterNot
20、merge此方法合并是按索引合并,要追加需使用concat。
21、first、last
22、indexOf、lastIndexOf
23、findIndex、findLastIndex
24、max、min
四、Map API
let Map = Immutable.Map;
0、toJS
将Map对象转为JS对象。
1、Map
创建一个新的immutable Map对象。
2、isMap
3、size
4、set
返回新增/修改了属性为key值为value的新Map。
5、delete
返回删除了key的新Map。
6、clear
清空Map。
7、update
类似List的update。
8、setIn
9、updateIn
功能与setIn类似,只是可以通过updater函数更新值。
10、deleteIn
11、merge
12、mergeDeep
13、mergeWith
14、map
15、filter
16、get
17、has
18、getIn
19、hasIn
四、案例
UI组件:
{this.props.shangpinData.get('data').count}
<button onClick={()=>{this.props.increment(1)}}>click me</button>
容器组件:
function mapStateToProps(state) {
return { shangpinData: state.shangpinReducer }
}
function mapDispatchToProps(dispatch) {
return {
increment: (val) => {
dispatch({
type: 'increment',
data: val,
})
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(shangpin)
reducer:
import { Map } from "immutable";
const defaultState = Map({
data: {
count: 0,
mass:'答对了',
},
});
export default (state = defaultState, action) => {
let dataVal = state.getIn(["data","count"]);
if (action.type == "increment") {
return state.setIn(["data","count"],dataVal+action.data);
}
return state;
};