Estoy leyendo los documentos de Redux Reducers y no entiendo cómo normalizar el estado trabajaría. El estado actual en el ejemplo es este:

{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

¿Puede proporcionar un ejemplo de cómo se vería lo anterior si siguiéramos lo siguiente?

Por ejemplo, mantener todosById: {id -> todo} y todos: array dentro del estado sería una mejor idea en una aplicación real, pero mantenemos el ejemplo simple.

9
mangocaptain 17 ago. 2016 a las 10:52

2 respuestas

La mejor respuesta

Este ejemplo es directamente de Normalizr.

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

Se puede normalizar de esta manera

{
  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'
      }
    }
  }
}

¿Cuál es la ventaja de la normalización?

Puede extraer la parte exacta de su árbol de estado que desee.

Por ejemplo, tiene una serie de objetos que contienen información sobre los artículos. Si desea seleccionar un objeto en particular de esa matriz, tendrá que iterar a través de toda la matriz. El peor de los casos es que el objeto deseado no está presente en la matriz. Para superar esto, normalizamos los datos.

Para normalizar los datos, almacene los identificadores únicos de cada objeto en una matriz separada. Llamemos a esa matriz como results.

result: [1, 2, 3 ..]

Y transforme la matriz de objetos en un objeto con claves como id (vea el segundo fragmento). Llame a ese objeto como entities.

En última instancia, para acceder al objeto con id 1, simplemente haga esto- entities.articles["1"].

4
Mihir 17 ago. 2016 a las 08:57

Puede usar normalizr para esto.

Normalizr toma JSON y un esquema y reemplaza las entidades anidadas con sus ID, reuniendo todas las entidades en diccionarios.

Por ejemplo,

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

Se puede normalizar a

{
  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'
      }
    }
  }
}
0
Dmitriy Nevzorov 17 ago. 2016 a las 08:55