reactjs - props - Objetos de estado complejo(profundo) React-Redux

react js ejemplos

Question

Dado que mi estado de redux inicial es:

const state = {
  currentView: ''ROOMS_VIEW'',
  navbarLinks: List([
    {name: ''Rooms'', key: ''ROOMS_VIEW''},
    {name: ''Dev'', key: ''''}
  ]),
  roomListsSelected: {group: 0, item: 0},
  roomLists: [
    {
      name: "Filters",
      expanded: true,
      listItems: [
        { icon: ''images/icon-warning.svg'', name: ''Alerts'', filter: room => room.hasAlert },
        { icon: ''images/icon-playlist.svg'', name: ''In Progress'', filter: room => room.progress > 20 },
        { icon: ''images/icon-playlist.svg'', name: ''Almost Done'', filter: room => room.progress > 90 },
        { icon: ''images/icon-playlist.svg'', name: ''Complete'', filter: room => room.status === ''complete'' },
        { icon: ''images/icon-playlist.svg'', name: ''Recently Completed'', filter: room => false },
        { icon: ''images/icon-playlist.svg'', name: ''All Rooms'', filter: room => true }
      ]
    }
  ],
  rooms: List(generateRooms())
}

Necesito hacer un reductor que haga esto:

state.roomList[n].expanded = !state.roomList[n].expanded

Soy nuevo en el uso de un flujo de trabajo de Redux y la mejor manera de resolverlo es hacer de roomList un objeto immutable.js o escribir algún código para hacer un clon profundo de mi objeto de estado.

También a state.roomList se le enviarán nuevos datos de características futuras.

Resumen / Pregunta: ¿Cuál es la mejor manera de devolver un nuevo objeto de estado en un reductor cuando se realizan cambios como este en el estado, o debo cambiar la estructura del objeto de estado Redux?

Lo que hice Al final, Inmutable parece el camino a seguir. Hay algunos trucos con Immutable para reducir el tiempo de renderizado de reacción y cumple con todos los requisitos del proyecto. También es lo suficientemente temprano en el proyecto para usar una nueva biblioteca sin hacer cambios importantes.

Answer 1

En primer lugar, Redux idiomático lo alienta a "normalizar" su estado y a allanarlo tanto como sea posible. Use objetos con clave por ID de elementos para permitir búsquedas directas de elementos, utilice matrices de ID para indicar el pedido, y en cualquier lugar que un elemento deba referirse a otro, solo almacena el ID del otro elemento en lugar de los datos reales. Eso le permite hacer búsquedas y actualizaciones más simples de objetos anidados. Consulte la pregunta de Redux sobre datos anidados .

Además, parece que actualmente está almacenando una serie de funciones directamente en su estado de Redux. Técnicamente, eso funciona, pero definitivamente no es idiomático, y romperá características como la depuración de viajes en el tiempo, por lo que está muy desanimado. Las preguntas frecuentes de Redux ofrecen más información sobre por qué almacenar valores no serializables en su estado de Redux es una mala idea .

editar:

Como seguimiento, recientemente agregué una nueva sección a los documentos de Redux, sobre el tema "Reducción de la estructura" . En particular, esta sección incluye capítulos sobre "Forma de estado de normalización" y "Actualización de datos normalizados" , así como "Patrones de actualización inmutables" .

Answer 2

Composición del reductor : descompone sus reductores en piezas más pequeñas para que un reductor sea lo suficientemente pequeño como para tratar con una estructura de datos simple. p.ej. En su caso, puede tener: roomListReducer listItemsReducer listItemReducer . Luego, en cada reductor, será mucho más fácil para usted leer con qué parte del estado está tratando. Ayuda mucho porque cada uno de sus reductores está tratando con pequeños datos que no tienen que preocuparse por cosas como "debería hacer una copia profunda o una copia superficial".

Inmutable Yo personalmente no uso immutable.js porque prefiero tratar con objetos simples. y hay demasiado código para cambiar para adoptar una nueva API. Pero la idea es asegurarse de que los cambios de estado siempre se realicen a través de funciones puras. Por lo tanto, simplemente puede escribir sus propias funciones de ayuda para hacer lo que quiera, solo asegúrese de que se prueben a fondo cuando se trata de objetos complejos.

O simplemente, siempre puede hacer una copia profunda de su estado en cada reductor, y mutar en la copia y luego devolver la copia. Pero obviamente esta no es la mejor manera.