javascript - attribute - title css

Redux: gestión del estado de precarga

Question

Estoy construyendo una aplicación, donde debo precargar datos de people y planet ( es probable que en el futuro se puedan agregar más requisitos de precarga ) en el lanzamiento de la aplicación. Quiero tener valor en la tienda que represente el estado global de la aplicación como loaded: <boolean> . El valor solo sería verdadero cuando los requisitos de precarga people.loaded: true y planet.loaded: true sean verdaderos. La tienda se vería así:

Store
├── loaded: <Boolean>
├── people:
│   ├── loaded: <Boolean>
│   └── items: []
├── planets:
│   ├── loaded: <Boolean>
│   └── items: []

Los creadores de acciones independientes realizan las solicitudes asincrónicas necesarias y las acciones de despacho que manejan los reductores People y Planets . Como se muestra a continuación (usa redux-thunk ):

actions/index.js

import * as types from ''../constants/action-types'';
import {getPeople, getPlanets} from ''../util/swapi'';

export function loadPeople () {
  return (dispatch) => {
    return getPeople()
      .then((people) => dispatch(addPeople(people)));
  };
}

export function loadPlanets () {
  return (dispatch) => {
    return getPlanets()
      .then((planets) => dispatch(addPeople(planets)));
  };
}

export function addPeople (people) {
  return {type: types.ADD_PEOPLE, people};
}

export function addPlanets (planets) {
  return {type: types.ADD_PLANETS, planets};
}

export function initApp () {
  return (dispatch) => {
    loadPeople()(dispatch);
    loadPlanets()(dispatch);
  };
}

../util/swapi maneja la búsqueda de datos de personas y planetas desde LocalStorage o realizando una solicitud.

initApp() creador de acciones initApp() llama a otros creadores de acciones dentro de site.js justo antes de renderizar a DOM como se muestra a continuación:

site.js

import React from ''react'';
import {render} from ''react-dom'';
import Root from ''./containers/root'';
import configureStore from ''./store/configure-store'';
import {initApp} from ''./actions'';

const store = configureStore();

// preload data
store.dispatch(initApp());

render(
  <Root store={store} />,
  document.querySelector(''#root'')
);

1. ¿Cuáles son las mejores prácticas para administrar el estado global de precarga de la aplicación en Redux?

2. ¿Es necesario tener un estado de loaded global en la tienda?

3. ¿Cuál sería una forma escalable de verificar el estado de la aplicación loaded en múltiples componentes de React? No parece correcto incluir el estado People y Planet para contenedores que solo necesitan conocer el estado global de la aplicación y no manejan la renderización de People o Planets . También sería doloroso administrarlo cuando el estado global loaded fuera necesario en múltiples contenedores.

Citando parte de la respuesta de Dan de Redux: múltiples tiendas, ¿por qué no? pregunta.

El uso de la composición reductora facilita la implementación de "actualizaciones dependientes" a la waitFor en Flux al escribir manualmente un reductor llamando a otros reductores con información adicional y en un orden específico.

4. ¿Dan llamando a otros reductores significa llamar a los reductores anidados?

Answer 1

Primero, déjame corregir tu ejemplo.

En lugar de

export function initApp () {
  return (dispatch) => {
    loadPeople()(dispatch);
    loadPlanets()(dispatch);
  };
}

puedes (y deberías) escribir

export function initApp () {
  return (dispatch) => {
    dispatch(loadPeople());
    dispatch(loadPlanets());
  };
}

No es necesario pasar el dispatch como argumento: el middleware de thunk se ocupa de esto.
Por supuesto, técnicamente su código es válido, pero creo que mi sugerencia es más fácil.

1. ¿Cuáles son las mejores prácticas para administrar el estado global de precarga de la aplicación en Redux?

Lo que estás haciendo parece correcto. No hay mejores prácticas específicas.

2. ¿Es necesario tener un estado de carga global en la tienda?

No. Como David señala en su respuesta , es mejor que guardes solo el estado necesario.

3. ¿Cuál sería una forma escalable de verificar el estado de la aplicación cargada en múltiples componentes de React? No parece correcto incluir el estado Personas y Planeta para contenedores que solo necesitan conocer el estado global de la aplicación y no manejan la renderización de Personas o Planetas. También sería doloroso administrarlo cuando el estado global cargado fuera necesario en múltiples contenedores.

Si le preocupa la duplicación, cree una función de "selector" y colóquela junto a sus reductores:

// Reducer is the default export
export default combineReducers({
  planets,
  people
});

// Selectors are named exports
export function isAllLoaded(state) {
  return state.people.loaded && state.planets.loaded;
}

Ahora puede importar selectores de sus componentes y usarlos en la función mapStateToProps dentro de cualquier componente:

import { isAllLoaded } from ''../reducers'';

function mapStateToProps(state) {
  return {
    loaded: isAllLoaded(state),
    people: state.people.items,
    planets: state.planet.items
  };
}

4. ¿Dan llamando a otros reductores significa llamar a los reductores anidados?

Sí, la composición del reductor generalmente significa llamar a los reductores anidados.
Por favor, consulte mis videos tutoriales Egghead gratuitos sobre este tema:

• Composición del reductor con matrices
• Composición del reductor con objetos
• Composición reductora con combineReducers()
• Implementando combineReducers() desde Scratch

Answer 2

Una bandera cargada en el estado de tu tienda tiene perfecto sentido.

Sin embargo, tienes demasiados de ellos. Tienes state.people.loaded , state.planets.loaded así como state.loaded . Este último se deriva de los dos primeros. Su tienda realmente no debería contener estado derivado. O tienen solo los dos primeros o solo el último.

Mi recomendación sería mantener los dos primeros, es decir, state.people.loaded y state.planets.loaded . Entonces su componente conectado puede derivar un estado cargado final. p.ej

function mapStateToProps(state) {
    return {
        loaded: state.people.loaded && state.planets.loaded,
        people: state.people.items,
        planets: state.planet.items
    };
}