npm 包 redux-immutable-ops 使用教程

在 React 和 Redux 开发中，有时候需要利用 Immutable.js 库操作 immutable 数据结构，但 Immutable.js 的 API 比较复杂，开发效率相对较低。这时候，我们可以使用 redux-immutable-ops 这个 npm 包来简化我们的操作。本文将介绍如何使用 redux-immutable-ops。

安装

使用 npm 安装：

$ npm install --save redux-immutable-ops

redux-immutable-ops 与 Redux 和 Immutable.js 十分兼容，可以很好地与它们配合使用。

基本操作

redux-immutable-ops 提供了一系列帮助我们操作 immutable 数据的 API。以下是常用的一些操作：

set

通过 set 操作可以设置 immutable 数据的某个属性值。它会返回一份新的 immutable 数据。示例代码：

import { set } from 'redux-immutable-ops';

const state = fromJS({ name: 'David', age: 20 }); 
const newState = set(state, 'age', 21);
console.log(newState); // { "name": "David", "age": 21 }

remove

通过 remove 操作可以删除 immutable 数据的某个属性。它也会返回一份新的 immutable 数据。示例代码：

import { remove } from 'redux-immutable-ops';

const state = fromJS({ name: 'David', age: 20 }); 
const newState = remove(state, 'age');
console.log(newState); // { "name": "David" }

update

通过 update 操作可以更新 immutable 数据的某个属性值。它也会返回一份新的 immutable 数据。不同于 set 操作，update 操作也可以接收一个函数作为第三个参数，这个函数会接收当前属性值作为参数，我们在这个函数中可以进行一些操作，然后返回一个新的属性值。示例代码：

import { update } from 'redux-immutable-ops';

const state = fromJS({ name: 'David', age: 20 }); 
const newState1 = update(state, 'age', age => age + 1);
console.log(newState1); // { "name": "David", "age": 21 }

const newState2 = update(state, 'age', age => age * 2);
console.log(newState2); // { "name": "David", "age": 40 }

merge

通过 merge 操作可以合并 immutable 数据的两个对象属性。它也会返回一份新的 immutable 数据。示例代码：

import { merge } from 'redux-immutable-ops';

const state = fromJS({ name: 'David', age: 20, address: { city: 'Beijing', street: 'xxx' } }); 
const newState = merge(state, 'address', { city: 'Shanghai', code: 200 });
console.log(newState); // { "name": "David", "age": 20, "address": { "city": "Shanghai", "street": "xxx", "code": 200 } }

我们可以看到，merge 操作会自动合并新旧对象的属性。

高级操作

除了基本操作外，redux-immutable-ops 还提供了一些比较有深度的操作。

updateIn

updateIn 可以更新 immutable 数据的嵌套属性。它接收一个数组作为参数，数组中的每一项表示需要更新的属性名。如果该属性名不存在，则会返回原始数据。示例代码：

import { updateIn } from 'redux-immutable-ops';

const state = fromJS({ name: 'David', age: 20, address: { city: 'Beijing', street: 'xxx' } }); 
const newState = updateIn(state, ['address', 'city'], city => city.toLowerCase());
console.log(newState.getIn(['address', 'city'])); // 'beijing'

mergeDeep

mergeDeep 可以深度合并两个 immutable 数据的所有属性，包括嵌套属性。示例代码：

import { mergeDeep } from 'redux-immutable-ops';

const state1 = fromJS({ address: { city: 'Beijing', street: 'xxx' } }); 
const state2 = fromJS({ address: { city: 'Shanghai', code: 200 } }); 
const newState = mergeDeep(state1, state2);

console.log(newState); // { "address": { "city": "Shanghai", "street": "xxx", "code": 200 } }

flatMap

flatMap 可以将 immutable 数据的属性展平成数组。具体使用方法请看示例代码：

import { flatMap } from 'redux-immutable-ops';

const state = fromJS({ name: 'David', address: { city: 'Beijing', street: 'xxx' } }); 
const newState = flatMap(state);
console.log(newState.toJS()); // [ 'David', 'Beijing', 'xxx' ]

总结

我们介绍了 redux-immutable-ops 的基本用法和一些高级用法。redux-immutable-ops 可以大大提高我们操作 immutable 数据的效率和可读性，如果你在 Redux 开发中需要处理 immutable 数据，建议使用 redux-immutable-ops。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1681e8991b448e6e1f