reactjs - para - redux react español

Cómo separar la UI y el estado de la aplicación en Redux

Question

Al escribir una aplicación react-redux , necesito mantener tanto el estado de la aplicación como el de la interfaz de usuario en el árbol de estado global. ¿Cuál es el mejor enfoque para diseñar su forma?

Digamos que tengo una lista de todos los elementos:

{
  items: [
    { id: 1, text: ''Chew bubblegum'' },
    { id: 2, text: ''Kick ass'' }
  ]
}

Ahora quiero dejar que los usuarios seleccionen y expandan los elementos. Hay (al menos) dos opciones de cómo modelar la forma del estado:

{
  items: [
    { id: 1, text: ''Chew bubblegum'', selected: true, expanded: false },
    { id: 2, text: ''Kick ass'', selected: false, expanded: false }
  ]
}

Pero esto es mezclar el estado UI ( selected y expanded ) con el estado de la aplicación. Cuando guardo la lista de tareas pendientes en el servidor, quiero guardar solo el estado de la aplicación, no el estado de la interfaz de usuario (en la aplicación del mundo real, el estado de la interfaz de usuario puede contener el estado de los diálogos modales, los mensajes de error, el estado de validación, etc.).

Otro enfoque es mantener otra matriz para el estado de la interfaz de usuario de los elementos:

{
  items: [
    { id: 1, text: ''Chew bubblegum'' },
    { id: 2, text: ''Kick ass'' }
  ],
  itemsState: [
    { selected: true, expanded: false },
    { selected: false, expanded: false }
  ]
}

Luego tienes que combinar esos dos estados al renderizar un elemento. Puedo imaginar que puede zip esos dos arreglos en la función de connect para facilitar la representación:

const TodoItem = ([item, itemState]) => ...;
const TodoList = items => items.map(item => (<TodoItem item={item} />));

export default connect(state => _.zip(state.items, state.itemsState))(TodoList);

Pero las actualizaciones del estado pueden ser dolorosas, porque los items y los items itemsState deben mantenerse sincronizados:

1. Al eliminar un elemento, se debe eliminar el itemState correspondiente.
2. Al reordenar los artículos, itemsState también se debe reordenar.
3. Cuando la lista de elementos de tareas pendientes se actualiza desde el servidor, es necesario mantener los identificadores en el estado de la interfaz de usuario y hacer alguna reconciliación.

¿Hay alguna otra opción? ¿O hay alguna biblioteca que ayude a mantener sincronizados el estado de la aplicación y el estado de la interfaz de usuario?

Answer 1

Actualmente estoy mirando esto para un proyecto paralelo. Voy a abordarlo de manera similar al método de Rick anterior. Los datos {} sirven como la fuente de la verdad y usted la usa para impulsar los cambios en la interfaz de usuario local (reflejando el estado más actual). Debe combinar los datos y la interfaz de usuario juntos antes de renderizar, y yo mismo lo he intentado en algunos lugares. Diré que, en lo que respecta a mantenernos sincronizados, no debería ser tan malo. Básicamente, cada vez que guarde / obtenga datos, estará actualizando los datos {} y eliminando la interfaz de usuario {} para preparar el próximo caso de uso.

Answer 2

Otro enfoque inspirado en normalizr :

{
    ids: [12,11], // registry and ordering
    data: {
        11: {text: ''Chew bubblegum''},
        12: {text: ''Kick ass''}
    },
    ui: {
        11: { selected: true, expanded: false },
        12: { selected: false, expanded: false }
    }
}