标签: normalizr

查看自述文件中的示例:

鉴于"坏"结构:

[{
  id: 1,
  title: 'Some Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}, {
  id: 2,
  title: 'Other Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}]

添加新对象非常容易.我所要做的就是这样

return {
  ...state,
  myNewObject
}

在减速机中.

现在给出了"好"树的结构,我不知道应该如何处理它.

{
  result: [1, 2],
  entities: {
    articles: {
      1: {
        id: 1,
        title: 'Some Article',
        author: 1
      },
      2: {
        id: 2,
        title: 'Other Article',
        author: 1
      }
    },
    users: {
      1: {
        id: 1,
        name: 'Dan'
      }
    }
  } …

我正在使用ReactJs和Redux以及一些教程和代码,我看到人们建议并使用normalizr来保持状态平坦.但保持平稳的真正优势是什么？如果不这样,我会遇到任何问题吗？有必要吗 ？

如何使用normalizr分配与实体父级相关的id/slug ？

例:

用户调用的API响应:

{
  id: '12345',
  firstName: 'John',
  images: [
    {
      url: 'https://www.domain.com/image0',
      name: 'image0'
    },
    {
      url: 'https://www.domain.com/image1',
      name: 'image1'
    }
  ]
}

我可以通过以下方式定义我的模式:

const image = new Schema('images');
const user = new Schema('users');

user.define({
  images: arrayOf(image)
})

问题是图像没有id属性,因此除非我们提供id属性,否则normalizr将无法区分它们.当然,我们可以做点什么

const image = new Schema('images', { idAttribute: uuid.v4() });

并生成唯一标识符.

假设我们收到用户更新,并且图像名称已更新.因为我们在每个规范化中生成唯一标识符,所以我们无法识别和更新现有图像.

我需要一种方法来引用图像实体中的父实体(用户)(在其id/slug中12345-image0,12345-image1或作为单独的属性).

实现这一目标的最佳方法是什么？

尝试规范化我的有效负载时遇到一些问题,该有效负载包含与使用Normalizr的父类型相同类型的嵌套模式

例如,我有一个初始对象(Menu),它有一个子(Sections),它是一个带有截面的对象数组,可以深入.

{
  id: 123,
  sections: [{
    id: 1,
    sections:[{ id: 4, sections: [ id: 5, sections: [] ] }]
  }, {
    id: 2,
    sections:[]
  }, {
    id: 3,
    sections:[]
  }]
}

我首先创建了一个menu模式,该模式在定义中包含链接到sections模式的部分,这些部分适用于第一次传递,但之后不会处理部分的子节点,因此我在section模式中添加了一个具有相同名称的后续定义(值得一试)但它没有用.

const section = new schema.Entity('sections')

const sections = new schema.Entity('sections', {
  sections: section
})

const menu = new schema.Entity('menu', { 
  sections: [ sections ]
})

section.define({ sections })

我希望最终得到以下对象:

{
  entities: {
    menu: {
      sections: [1, 2, 3]
    }, …

我使用redux和normalizr来规范化服务器的响应,基本上遵循现实世界的例子.这种方式entitiesreducer非常简单,只需合并响应即可.我现在遇到的问题是一种delete操作.我发现这个问题#21 of normalizr repo但仍然无法弄清楚如何解决这个问题.例如,

目前的状态是

{
  entities:
    product_categories: {
      ...
      13: {
        ...
        products: ["1", "2"], <--------------- [i] Current state
        ...
      }
    },
    products: {
      1: {
        id: "1"
      }
    }
}

标准化的响应是

{
  ...
    product_categories: {
      ...
      13: {
        ...
        products: ["1"], <---------------- [2] Normalized result
      }
  ...
}

如您所见,后端api只返回属于此类别的所有产品ID,在这种情况下,"2"将被分离.当'entities'reducer合并这个响应时,"2"仍然存在.现在我只是重新加载页面,但我想知道是否有更好的方法来处理这种情况？

在entitiesreducer中,我只是像现实世界中的例子一样合并它.

return merge({}, state, action.payload.entities);

我有一个使用React + Redux + Normalizr的应用程序,我想知道在某些内容发生变化时减少渲染次数的最佳做法entities.

如果我只改变实体内部的一个实体,那么它将重新渲染所有组件,而不仅仅是需要该特定实体的组件

我正在使用 Redux 和Normalizr在 TypeScript 中构建 React Native 应用程序。所以我会有规范化的状态。

我有四个接口：Emotion、Need和：PainDataPainReport

export interface Emotion {
  name: string;
  chosen: boolean;
  rating: number;
}

export interface Need {
  name: string;
  rating: number;
}

export interface PainData {
  note: string;
  emotions: Emotion[];
  needs: Need[];
  date: Date;
}

export interface PainReport {
  [date: string]: PainData
}

现在我想创建一个不是数组的接口，而是一个允许多个 PainReport 的对象，如下所示（伪代码）：

export interface PseudoPainReportsObject {
  [date: string]: PainData,
  [date: string]: PainData,
  [date: string]: PainData,
  // ... dynamically have as many as …

如何使用normalizr处理标准的关键嵌套标准化JSON API响应{ data: ... }？

例如a Book

{
    data: {
        title: 'Lord of the Rings',
        pages: 9250,
        publisher: {
            data:  {
                name: 'HarperCollins LLC',
                address: 'Big building next to the river',
                city: 'Amsterdam'
            },
        },
        author: {
            data: {
                name: 'J.R.R Tolkien',
                country: 'UK',
                age: 124,
            }
        }
    }
}   

我如何设计模式来处理嵌套数据键？

请先在这里看到这个问题.我正在使用每个人都在使用的这个示例对象.

{
  entities: {
      plans: {
        1: {title: 'A', exercises: [1, 2, 3]},
        2: {title: 'B', exercises: [5, 6]}
      },
      exercises: {
        1: {title: 'exe1'},
        2: {title: 'exe2'},
        3: {title: 'exe3'}
        5: {title: 'exe5'}
        6: {title: 'exe6'}
     }
   },
currentPlans: [1, 2]
}

当用户单击"删除练习"时,消息可能如下所示:

{type: "REMOVE_EXERCISE", payload: 2}

我是否需要遍历所有计划,然后是每个计划中的所有练习才能删除此项目？如何在减速机中完成？

comments : {
    byId : {
        "comment1" : {
            id : "comment1",
            author : "user2",
            comment : ".....",
        },
        "comment2" : {
            id : "comment2",
            author : "user3",
            comment : ".....",
        },
        "comment3" : {
            id : "comment3",
            author : "user3",
            comment : ".....",
        },
        "comment4" : {
            id : "comment4",
            author : "user1",
            comment : ".....",
        },
        "comment5" : {
            id : "comment5",
            author : "user3",
            comment : ".....",
        },
    },
    allIds : ["comment1", "comment2", "comment3", "commment4", "comment5"]
} …