【问题标题】:Normalizr - not resulting expectedNormalizr - 没有预期的结果
【发布时间】:2016-05-29 23:10:12
【问题描述】:
import { normalize, Schema, arrayOf } from 'normalizr';

var ListA = [
    {
        id:1, 
        text: "text1",
        comments : [
            {
                id: 232,
                text: "asfasd"
            },
            {
                id: 333,
                text: "abcsss"
            }
        ]
    }, 
    {id:2, text:"text2", comments:[]}, 
    {id:3, text:"text3", comments:[]}
    ]

我正在尝试使这个简单的响应正常化。我不确定我在做什么有什么问题,或者我没有理解 normalizr 文档。

const post = new Schema('posts');
// const comment = new Schema('comments');
// const collection = new Schema('collections');

// post.define({
//  comments : comment,
//  collections : arrayOf(collection)
// });
ListA = normalize(ListA, {
    posts: arrayOf(post)
});

console.log(ListA);

这只会对“结果”对象产生相同的响应,并且实体对象是空的。有人可以帮帮我吗。首先,我试图仅将帖子标准化,然后再进行评论。但我无法跨过第一步。

【问题讨论】:

    标签: javascript reactjs redux flux normalizr


    【解决方案1】:

    使用normalizr的几个例子

    1) 标准化简单对象
    只是举例

    import { Schema, arrayOf } from 'normalizr';
    const postSchema = new Schema('posts');
    
    // simple post object
    var post = {
      id:1,
      title: "some title"
    };
    
    console.log(normalize(post, postSchema));
    

    结果是

    {
       "entities":{
          "posts":{
             "1":{
                "id":1,
                "title":"some title"
             }
          }
       },
       "result":1
    }
    

    2) 标准化对象数组

    import { Schema, arrayOf } from 'normalizr';
    const postSchema = new Schema('posts');
    
    // array of posts
    var posts = [
      {
        id:1,
        title: "foo"
      },
      {
        id:2,
        title: "far"
      },
      {
        id:3,
        title: "baz"
      }
    ];
    
    console.log(normalize(posts, arrayOf(postSchema)));
    

    结果是

    {
       "entities":{
          "posts":{
             "1":{
                "id":1,
                "title":"foo"
             },
             "2":{
                "id":2,
                "title":"far"
             },
             "3":{
                "id":3,
                "title":"baz"
             }
          }
       },
       "result":[
          1,
          2,
          3
       ]
    }
    

    3) 归一化复杂对象

    const postSchema = new Schema('posts');
    const authorSchema = new Schema('authors');
    const commentSchema = new Schema('comments');
    
    postSchema.define({
      author: authorSchema,
      comments: arrayOf(commentSchema)
    });
    
    // complex post object
    var post = {
      id:1,
      title: "foo",
      author: {
        id: 201,
        name: "Bar Baz"
      },
      comments: [
        {
          id: 1002,
          body: "Some content"
        },
        {
          id: 1003,
          body: "Some content 1003"
        },
        {
          id: 1004,
          body: "Some content 1004"
        }
      ]
    };
    
    console.log(normalize(post, postSchema));
    

    结果是

    {
      "entities":{
        "posts":{
          "1":{
            "id":1,
              "title":"foo",
              "author":201,
              "comments":[
              1002,
              1003,
              1004
            ]
          }
        },
        "authors":{
          "201":{
            "id":201,
              "name":"Bar Baz"
          }
        },
        "comments":{
          "1002":{
            "id":1002,
              "body":"Some content"
          },
          "1003":{
            "id":1003,
              "body":"Some content 1003"
          },
          "1004":{
            "id":1004,
              "body":"Some content 1004"
          }
        }
      },
      "result":1
    }
    

    所以你可以试试

    ListA = normalize(ListA, arrayOf(post));
    

    而不是

     ListA = normalize(ListA, {
        posts: arrayOf(post)
     });
    

    【讨论】:

    • 谢谢.. 成功了。请您详细解释一下它是如何工作的。就像我也想规范化评论一样。最近尝试进入 Redux 架构,除非正确理解,否则一切看起来都非常混乱/神奇。再次感谢。
    • @user98239820 我添加了一些有用的示例
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-05-29
    • 1970-01-01
    • 2015-04-20
    • 2016-06-28
    • 2022-01-24
    • 2021-12-10
    相关资源
    最近更新 更多