normalizr配合Redux将数据扁平化的用法

2019-01-14 本文已影响0人绕树三匝

数据范式化

1.引入范式化类库

import { schema, normalize } from 'normalizr';

2.schema || normalize 概念

Schema: 略图、概要、纲要、提要

Normalize: 使标准化、使规格化

schema 顾名思义，其实就表结构设计的基石，规定表字段设计以及表中每一条数据唯一标识的ID。

Normalize: 他会根据schema中的定义对数据进行序列化。

3.schema || normalize用法

作为数据结构设计，总是从简单到复杂，数据的基本组成也就5种，string、number、bool、undefined、null,表结构只能容纳基础类型的数据。

那么我们在使用schema对表结构进行设计的时候，也是同样的道理，我们首先从最小最底层的数据结构入手，接下来我以询价详情作为范例进行解释。

如上所示，这是没有范式化之前的数据，当我们将整个数据字段表，全部存入store之后，我们如果需要根据数据来进行渲染改变时，就会陷入多重循环，性能上会产生很大的问题，尤其是数组长度不可控，在这种情况下性能基本是无法得到保证的,我们将数据进行范式化之后得到如下结果：

数据被拍扁，变得扁平化了，每个扁平化后的数据，都是以ID作为检索手段，当需要修改具体的值得时候，可以直接通过对象的点访问来进行改变。

schema具体使用

constquoteResult=newschema.Entity('quoteResults', {}, {idAttribute:'productId'});

constoeResult=newschema.Entity('oeResults', {quoteResults: [quoteResult] }, {idAttribute:'oeId'});

constmyNeeds=newschema.Entity('needs', {oeResults: [oeResult] }, {idAttribute:'needId'});

constmySchema={needs: [myNeeds] };

constresult=normalize(inquiryData,mySchema);

denormalize

反序列化