Estoy creando una aplicación de ejemplo con Mobx y Mobx React Lite para aprender a usar esta biblioteca de administración de estado. La aplicación debe tener preguntas cargadas cuando el usuario visita la página. ¿Está bien llamar a la carga inicial de datos en el constructor de esta manera? ¿Podría esto causar errores de alguna manera?
Mi preocupación es que podría recuperarse nuevamente, pero no estoy seguro de que esa sea la única preocupación que debería tener.
¿Qué otro patrón sugeriría si esto es arriesgado?
Mi idea alternativa es tomarlo fuera de contexto cuando hacen clic en el botón "Comenzar cuestionario" y tener una pantalla de carga mientras recupera los datos. Lo más probable es que así sea, pero me pregunto más o menos si lo que hice también está bien.
import { observable, action } from "mobx"; import { getQuestions } from "../api/api"; export interface Question { category: string; type: string; question: string; correct_answer: string; incorrect_answers: string[]; } export class TriviaStore { constructor() { // Is this bad? (async() => { await this.loadQuestions(); })() } @observable questions: Question[] = []; @observable currentQuestion: number = 0; @action async loadQuestions() { let questions: Question[] = await getQuestions(); this.questions = questions; } @action nextQuestion() { this.currentQuestion++; } }La tienda solo se instancia una vez en un proveedor de contexto de esta manera:
import React from 'react'; import { TriviaStore } from '../stores/TriviaStore'; /** * Store Types. * Add any new stores here so the context type is updated. */ type RootStateContextValue = { triviaStore: TriviaStore; } const RootStateContext = React.createContext<RootStateContextValue>({} as RootStateContextValue); /** * Stores * Use this area to create instances of stores to pass down. */ const triviaStore = new TriviaStore(); /** * Root State Provider * @returns global state context wrapper. */ export const RootStateProvider: React.FC<React.PropsWithChildren<{}>> = ({children}) => { // Finally pass new stores into the object below to send them to global state. return ( <RootStateContext.Provider value={{ triviaStore, }} > {children} </RootStateContext.Provider> ); } export const useGlobalState = () => React.useContext(RootStateContext);Inicializar la tienda antes de que se carguen todos los datos está bien, en mi opinión. Puede agregar el estado de carga directamente a la tienda. Colocar la función asíncrona como método en la tienda es una buena idea. Aunque creo que el contenedor de función asíncrona ejecutado inmediatamente no tiene efecto y la tienda se inicializará antes de que se carguen las preguntas. Mira este ejemplo:
@observable loading = true constructor() { // Same as with your wrapper, constructor cannot be made async. this.loadQuestions() } @action async loadQuestions() { let questions: Question[] = await getQuestions() // Newer versions of MobX will warn if runInAction missing after async call. runInAction(() => { this.questions = questions this.lading = false }) }En mi opinión, la parte no tan buena es mezclar la tienda MobX con React Context, que creo que no es necesario, ya que ya puedes importar directamente la tienda desde cualquier lugar.
Aunque React le permitirá obtener algunos datos y no causará ningún error en el constructor, los desarrolladores de React no lo sugieren y no es una buena práctica. Debería buscar sus datos en componentDidMount() en su lugar.
Si su diseño requiere varias búsquedas después de cargar la página, puede intentar hacerlo en componentDidUpdate() y actualizar sus estados iniciales.