Construire une application React Universal Blog: Implémentation de flux

Ce tutoriel montre la création d'une application de blog Universal React évolutive à l'aide de Flux Architecture. La deuxième partie se concentre sur la gestion du contenu et la mise à l'échelle des applications.

Concepts clés:

• Modèle de flux pour la gestion des données: Centralise la gestion de l'État dans un seul "magasin", assurant la cohérence des données.
• Structure de l'itinéraire modulaire: décomposer routes.js en composants plus petits et plus gérables pour une organisation améliorée.
• Composants Smart vs Dumb: Les composants de niveau supérieur (intelligents) gèrent la manipulation des données, tandis que les composants de niveau inférieur (stupides) rendent l'interface utilisateur basée sur les accessoires reçus, favorisant le flux de données unidirectionnel.
• AppDispatcher en tant que gestionnaire d'action: Le centre central pour la distribution de mises à jour de données à partir des actions au magasin.
• Cosmic JS CMS Intégration: gère et récupére dynamiquement les données d'application, améliorant l'évolutivité et la maintenabilité.
• Rendement côté serveur (SSR): Améliore le référencement et les performances en rendant l'application React sur le serveur et le client.

refactoring routes.js:

Pour améliorer l'organisation, le fichier routes.js est refactorisé pour séparer les voies de page en composants individuels. Le code mis à jour comprend le AppStore pour la gestion des données.

// routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import AppStore from './stores/AppStore'
import App from './components/App'
import Blog from './components/Pages/Blog'
import Default from './components/Pages/Default'
import Work from './components/Pages/Work'
import NoMatch from './components/Pages/NoMatch'

export default (
  <Route path="/" data={AppStore.data} component={App}>
    <IndexRoute component={Blog}/>
    <Route path="about" component={Default}/>
    <Route path="contact" component={Default}/>
    <Route path="work" component={Work}/>
    <Route path="/work/:slug" component={Work}/>
    <Route path="/blog/:slug" component={Blog}/>
    <Route path="*" component={NoMatch}/>
  </Route>
)

La boutique: source unique de vérité

Le flux Store agit comme la seule source de vérité pour les données d'application. Les principes clés comprennent:

1. pas de manipulation DOM directe.
2. L'UI est basée sur les données; Les données résident dans le magasin.
3. Les modifications de l'interface utilisateur proviennent des mises à jour des données du magasin.
4. Les données circulent unidirectionnellement des composants de niveau supérieur aux composants de niveau inférieur via les accessoires.

Le fichier AppStore.js implémente ceci:

// AppStore.js
import { EventEmitter } from 'events'
import _ from 'lodash'

export default _.extend({}, EventEmitter.prototype, {
  data: {
    ready: false,
    globals: {},
    pages: [],
    item_num: 5
  },
  emitChange: function(){ this.emit('change') },
  addChangeListener: function(callback){ this.on('change', callback) },
  removeChangeListener: function(callback) { this.removeListener('change', callback) }
})

React Composants: Smart and Dumb

Les actions de modification des données sont confinées aux composants de niveau supérieur (SMART), tandis que les composants de niveau inférieur (stupides) rendent l'interface utilisateur basée sur les accessoires. Le composant App.js le démontre:

// App.js
import React, { Component } from 'react'
import AppDispatcher from '../dispatcher/AppDispatcher'
import AppStore from '../stores/AppStore'
import Nav from './Partials/Nav'
import Footer from './Partials/Footer'
import Loading from './Partials/Loading'

export default class App extends Component {
  componentDidMount(){ AppStore.addChangeListener(this._onChange.bind(this)) }
  componentWillUnmount(){ AppStore.removeChangeListener(this._onChange.bind(this)) }
  _onChange(){ this.setState(AppStore) }
  getStore(){
    AppDispatcher.dispatch({ action: 'get-app-store' })
  }
  render(){
    const data = AppStore.data
    if(!data.ready){
      document.body.className = ''
      this.getStore()
      let style = { marginTop: 120 }
      return (<div className="container text-center" style={style}><Loading /></div>)
    }
    const Routes = React.cloneElement(this.props.children, { data: data })
    return (
      <div>
        <Nav data={data}/>
        {Routes}
        <Footer data={data}/>
      </div>
    )
  }
}

Les composants Blog.js et BlogList.js illustrent comment les données circulent des composants de niveau supérieur aux composants de niveau inférieur:

//Blog.js (excerpt)
getPageData(){
    AppDispatcher.dispatch({
      action: 'get-page-data',
      page_slug: 'blog',
      post_slug: this.props.params.slug
    })
  }
//BlogList.js (excerpt)
  render(){
    let data = this.props.data
    let articles = data.articles
    // ...rest of the component
    articles = _.take(articles, item_num)
    let articles_html = articles.map(( article ) => {
      // ...map through articles
    })
    return (
      <div>
        <div>{ articles_html }</div>
        { load_more }
      </div>
    )
  }

(Remarque: le code complet pour d'autres composants comme AppDispatcher.js, actions.js, config.js, et app-server.js est omis par la concision mais est disponible dans le référentiel github référencé.)

COSMIC JS Configuration et rendu côté serveur

Le fichier config.js est utilisé pour se connecter au COSMIC JS CMS. Le fichier app-server.js gère le rendu côté serveur à l'aide de ReactDOMServer.renderToStaticMarkup. Les scripts package.json sont configurés pour le développement et les builds de production.

Conclusion

Ce tutoriel fournit une base pour construire une application de blog Universal React robuste et évolutive. L'utilisation de l'architecture de flux et du rendu côté serveur améliore les performances, le référencement et la maintenabilité. Le code complet est disponible sur GitHub. La section FAQ aborde les questions courantes sur le flux, la réaction et les applications universelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!