javascript - source - react redux todo example

Redux normalizó respuestas de API anidadas

Question

¿Cómo puedo usar el método normalizr para manejar las respuestas estandarizadas de la API JSON anidadas que son claves a través del estándar { data: ... } ?

Por ejemplo, un 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,
            }
        }
    }
}   

¿Cómo diseñaría esquemas para manejar la clave de datos anidados?

Answer 1

Creo que lo que buscas es el uso de la función assignEntity que se puede pasar en las opciones de normalize . En este caso, nos permite, cuando corresponde, filtrar las propiedades de data redundantes e ir directamente a los valores que se encuentran debajo.

Efectivamente assignEntity permite controlar cómo se normaliza cada clave de datos. Mire aquí un poco más sobre cómo funciona.

Reuní esto como una demostración, eche un vistazo: http://requirebin.com/?gist=b7d89679202a202d72c7eee24f5408b6 . Aquí hay un fragmento:

book.define({
  data: {
    publisher: publisher,
    author: author,
    characters: normalizr.arrayOf(character)
  }}
);

publisher.define({
  data: {
    country: country
  }
});

const result = normalizr.normalize(response, book, { assignEntity: function (output, key, value, input) {
  if (key === ''data'') {
    Object.keys(value).forEach(function(d){
      output[d] = value[d];
    })
  } else {
    output[key] = value;
  }
}});

También vea en particular Ln 29, donde la matriz de characters tiene algunos objetos con la información anidada dentro de los data y algunos sin ella. Todos están normalizados correctamente.

También agregué algunas partes para mostrar cómo funciona con arreglos y datos profundamente anidados, vea el modelo de country dentro del publisher .

Con los datos proporcionados, necesitará un slug debido a la ausencia de id, que cada esquema también contiene en el ejemplo.

Normalizr es fantástico, espero que eso ayude a explicar un poco más al respecto :)

Answer 2

Para cada entidad en su respuesta, debe crear su propio esquema.

En su ejemplo, tenemos tres entidades: books , authors y publishers :

// schemas.js
import { Schema } from ''normalizr'';

const bookSchema = new Schema(''book'');
const publisherSchema = new Schema(''publisher'');
const authorSchema = new Schema(''author'');

Si alguna entidad contiene datos anidados que deberían normalizarse, necesitamos usar el método de define de ese esquema. Este método acepta un objeto con reglas de anidamiento.

Si necesitamos normalizar el publisher y los puntales del author de la entidad del book , debemos pasar un objeto para define función con la misma estructura que nuestra respuesta:

// schemas.js
bookSchema.define({
  data: {
    publisher: publisherSchema,
    author: authorSchema
  }
});

Ahora podemos normalizar nuestra respuesta:

import { normalize } from ''normalizr'';
import { bookSchema } from ''./schemas.js'';

const response = {
    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,
            }
        }
    }
}

const data = normalize(response, bookSchema);