Progettazione di applicazioni per il flusso di dati di informazioni passo a passo

Question

Progettazione di applicazioni per il flusso di dati di informazioni passo a passo

#1 da (1 voti)
#2 da (1 voti)

1

Supponiamo che la mia applicazione consista di molti componenti, in cui gli utenti devono riempire le loro informazioni, qualcosa del genere:

-Select city
'-Select library
 '-Select book
  '-... a lot of components like above

Quindi, l'applicazione ha determinato il flusso di dati, il primo utente deve selezionare città, quindi libreria, quindi prenotare, ecc.

Il flusso di dati è simile a questo, ad esempio, quando l'utente sceglie la città, nel passaggio successivo, ci sarà un elenco di librerie appositamente per la città scelta, quindi l'utente seleziona la libreria e l'elenco dei libri nella libreria scelta verrà mostrato rispettivamente.

Il problema è , che quando l'utente ha selezionato città, biblioteca e libro, vuole scegliere un'altra città, deve caricare nuovamente le librerie, ovviamente, quindi cosa dovrei fare in applicazione con il libro selezionato , altri componenti selezionati? Capisco, ho bisogno di ripristinarli, impostare il libro selezionato su null, qualunque sia il ripristino funziona.

Tuttavia, ho davvero bisogno di descrivere manualmente tutti i passaggi, come in pseudocode:

onCitySelected(selectedCity) {
 currentCity = selectedCity;
 getLibraries(selectedCity);
 resetBooks();
 //reset...
 //a lot of reset functions...
}

Come posso evitare un codice così prolisso, quale design dell'applicazione dovrei usare?

Sto usando React + Redux, se aiuta.

application-design dataflow

posta Yurii N. 09.02.2017 - 11:42

fonte

2 risposte

Leggi altre domande sui tag application-design dataflow

è un componente del contenitore di reazione un'istanza del modello dell'adattatore? Accesso allo stato del thread dal processo principale [chiuso]

score 1 · Answer 1

Potresti farlo in modo più generico:

class SelectList {
  constructor(callbackOnChange, items) {
    // we call this method when our selected one changes
    this.callbackOnChange = callbackOnChange;

    // list of items available
    this.items = items;

    // selected item
    this.selectedItem = null;
  }

  select(item) {
    this.selectedItem = item;
    this.callbackOnChange(this, item);
  }

  reset() {
    this.selectedItem = null;
  }

}

class SelectListsWorkflow() {
  constructor() {
    this.lists = [
      new SelectList(this.handleChange, ['city 1', 'city 2']),
      new SelectList(this.handleChange, ['library 1', 'library2']),
      new SelectList(this.handleChange, ['book 1', 'book 2']),
    ];
  }

  handleChange(selectedList, selectedItem) {
    // your logic to unset the selected value in lists after the current list
    // for example:
    let startReset = false;
    this.lists.each((list) => {
      if(list === selectedList) {
        startReset = true;
      }
      if(startReset) {
        list.reset();
      }
    });
  }
}

In questo modo è relativamente facile aggiungere più elenchi e mantenere la logica coerente. Anche le responsabilità sono più separate. Il flusso di lavoro gestisce la propria logica,

score 1 · Answer 2

Ritarderei a reimpostare il componente finché non avessi bisogno di mostrare di nuovo quel componente. Dovresti nascondere o disabilitare componenti che non sono ancora necessari. Prima di mostrare un componente, verifichi i dati associati a quel componente, se i dati non sono più validi, quindi deseleziona il componente prima di mostrarlo.

Questo ha anche il vantaggio che se ci sono dati non lineari, allora hai la possibilità di non resettare i dati. Nel tuo esempio, se un utente desidera cercare un particolare libro in più librerie, non avrà più bisogno di riempire il libro.