Dove inserisco la logica di codifica nella mia applicazione di Reazione

Question

Quindi ho creato una semplice applicazione di ricerca Json che è possibile visualizzare su codepen. Si cerca il titolo JSON e tag e restituisce eventuali incontri: http://codepen.io/ghozt12/pen/LVaxLM

E 'in base al largo della esempio dato sul sito React (https://facebook.github.io/react/docs/thinking-in-react.html).

Tuttavia non capisco dove mettere la logica che filtra i risultati della ricerca. Se React è solo la V in MVC, la logica di business non dovrebbe andare nel Modello? Ma React è solo la vista, quindi dove metti la logica?

In particolare per la mia applicazione, ho inserito il codice di ricerca in questa classe di reazione e volevo sapere se questo era il posto giusto per inserirlo? (vedi la mia codepen per la vista dettagliata).

var Table = React.createClass({ 
    render: function() { 

    // CODE THAT FILTERS SEARCH RESULTS GOES HERE 
    // creates rowTitle array 

    return ( 
     <div> 
      {rowsTitle} 
     </div> 
     ); 
    } 
}); 

Answer 1

Come hai detto, React è solo la V in MVC. Quindi, dove metti la tua logica aziendale?

Per la logica di business piccola, specifica della vista, è corretto inserirla nel componente, come hai fatto tu. Se la logica aziendale è nel componente, sarà su un gestore di eventi, nel rendering o in qualsiasi altro metodo componente.

Se si dispone di una logica di business non di visualizzazione specifica e viene eseguito sul client (o sul client e sul server), è sempre consigliabile isolarlo in un modulo JavaScript separato. React non funziona bene con AMD, quindi è meglio non usare RequireJS per la modularizzazione. Probabilmente dovresti usare Browserify o Webpack. In questo caso, tutto ciò che dovresti fare è aggiungerlo al file in alto o al tuo componente: var myBusinessLogic = require('./myBusinessLogic'). Ora puoi delegare l'elaborazione a questo modulo. Questo è il modo preferito, perché i moduli JavaScript sono facilmente testabili usando Jest, Jasmine, Karma o Mocha.

C'è anche un terzo scenario in cui si delegano business logic al server. È possibile effettuare direttamente le chiamate Ajax all'API sul server, eseguire questa elaborazione oppure è possibile utilizzare il modo più sofisticato e utilizzare Flux. Esiste una pletora di implementazioni di Flux, come Alt, Redux e Fluxxor. Preferisco avere la mia implementazione di Flux usando il Dispatcher predefinito. All'interno dello ActionCreators chiamo un metodo su clientApi (un modulo JS), che esegue una chiamata Ajax utilizzando Axios sul server. Questa chiamata è gestita da una route Express che alla fine delega la business logic allo serverApi.

EDIT: Ho appena trasferita a Redux :)

Answer 2

si può spingere la logica all'interno di ogni componente di classe e la Component App. Logica nella classe Componente per questo stato e Logica nell'app Componente per tutte le applicazioni