Redux：为什么 Normalizr 库不起作用？答案

【问题标题】：Redux: Why Normalizr library isn't working?Redux：为什么 Normalizr 库不起作用？
【发布时间】：2019-06-15 23:53:42
【问题描述】：

我正在尝试使用 Normalizr 到 flatten Redux 状态。以下是架构定义

import { normalize, schema } from 'normalizr'

const fooSchema = new schema.Entity('foos')
const barSchema = new schema.Entity('bars')

const fooMemberSchema = new schema.Entity('fooMembers', {
    foo: fooSchema
})
const barMemberSchema = new schema.Entity('barMembers', {
    bar: barSchema
})

 export { fooSchema, barSchema, fooMemberSchema, barMemberSchema }

这是在doGet 函数中对normalize 的调用

import axios from 'axios'
import { normalize } from 'normalizr'
import { Promise } from 'es6-promise'
import querystring from 'querystring'
import { CONTEXT_PATH, API_PATH } from '../properties/Properties'

import { fooSchema, barSchema, fooMemberSchema, barMemberSchema } from '../stores/Schema'

/**
 * Tuomas Toivonen
 * 13.1.2019
 */

// Backend mock for development and debugging purposes
const Api = {

    resources: {
        foo: {},
        bar: {}
    },

    doGet({ uri, config={} }) {
        // TODO: tokenize uri
        let data = Object.values(this.resources[uri])
        console.log(data)
        console.log(normalize(data, [fooSchema]))
        return Promise.resolve({data: data})
    },

    doPost({ uri, entity, config={} }) {
        let id = entity.id
        if (!id) {
            id = guid()
            entity.id = id
        }

        this.resources[uri][id] = entity
        return Promise.resolve({data: entity})
    },

    doPut({ uri, entity, config={} }) {
        Promise.reject({message: "doPut not implemented"})
    },

    doDelete({ uri, entity, config={} }) {
        Promise.reject({message: "doDelete Not implemented"})
    }
}

// Generate dummy data
for (let i=0; i<3; i++) {
    let fooId = guid()
    let barId = guid()

    Api.resources.foo[fooId] = {
        id: fooId,
        value: `Foo ${i}`,
        fooMembers: [
            ...(function*() {
                for (let i=0; i<5; i++)
                    yield { id: guid(), value: `FooMember ${i}` }
                })()
            ]
        }
    Api.resources.bar[barId] = {
        id: barId,
        value: `Bar ${i}`,
        barMembers: [
            ...(function*() {
                for (let i=0; i<5; i++)
                    yield { id: guid(), value: `BarMember ${i}` }
                })()
            ]
        }
}

console.log('Using mock API:')
console.log(Api)

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

export default Api

但是，它并没有按预期对结构进行规范化。以下是控制台日志消息：

标准化前的有效载荷：

标准化后的有效载荷：

出于某种原因，FooMembers 仍然是嵌套的。这是为什么呢？

【问题讨论】：

标签： javascript json reactjs redux normalizr

【解决方案1】：

您传入的架构是一个没有任何实际定义的单个实体的数组：

const fooSchema = new schema.Entity('foos')
normalize(data, [fooSchema])

这意味着 normalizr 认为它正在接收一个实体数组。就是这样。

看起来您想要说明的是将fooMembers 链接到fooSchema。为此，您需要正确定义fooSchema：

const fooMemberSchema = new schema.Entity('fooMembers'); 
const fooSchema = new schema.Entity('foos', { fooMembers: [fooMemberSchema] });

【讨论】：