Flatten State

Flatten State

平时在操作数据的增删改查中 我们经常会操作数组，同时使用各种数组的API，例如 find，map, filter ...

但是使用 Flatten State 的方法，也就是 扁平化数据 能更好的精简代码，是一种类似 hashMap 的数据格式。

const arr = [
  {
    id: 1,
    name: '小明',
    age: 18
  },
  {
    id: 2,
    name: '小红',
    age: 15
  },
  {
    id: 3,
    name: '小强',
    age: 19
  }
]

// 在实际业务中我们一般会拿到一个id的值去操作数据
// 例如 修改一条数据
const updateFunc = id => {
  arr = arr.map(item => {
    if(item.id === id) {
      item.name = '小新'
    }
    return item
  })
}
// 查找一个数据
const findItem = id => {
  const currentItem = arr.find(item => item.id === currentId)
  return currentItem
}
// 删除一个数据
const delFunc = id => {
  arr = arr.filter(item => item.id !== id)
}

如果我们去改变数组的数据格式呢，会不会变得简单一点

// array -> object
export function flattenArr(arr) {
  return arr.reduce((prve, item) => {
    prve[item.id] = item  //这里可以根据多传一个参数来复用 不一定是id  可以是uuid openid 等等根据项目
    return prve
  },{})
}
// object -> array 有些情况需要用到原数组
export function object2Arr(obj) {
  return Object.keys(obj).map(key => obj[key])
}

使用转换的数据操作

const obj = flattenArr(arr)
// 例如 修改一条数据
const updateFunc = id => {
  const updateItem = { obj[id], name: '小新' }
	obj = { ...obj, [id]: updateItem }
}
// 查找一个数据
const findItem = id => obj[id]
// 删除
const delFunc = id => {
  const { [id]: value, afterDelete } = obj
  arr = afterDelete
}

看着感觉没有简单多少， 但是在框架中， 我们需要遵循 immutable 原则 ，使用转换的数据更方便。