React Universalブログアプリの構築：フラックスの実装

このチュートリアルでは、Fluxアーキテクチャを使用してスケーラブルなReact Universalブログアプリの構築を示しています。 パート2では、コンテンツ管理とアプリケーションのスケーリングに焦点を当てています

重要な概念：

データ管理のためのフラックスパターン：

フラックスパターン：

単一の「ストア」内で状態管理を集中させ、データの一貫性を確保します。
• モジュラールート構造：
• は、組織の改善のために、より小さくて管理しやすいコンポーネントに分解します。 routes.jsスマート対ダムコンポーネント：
高レベル（スマート）コンポーネントはデータの操作を処理しますが、下位レベル（ダム）コンポーネントは受信した小道具に基づいてUIをレンダリングし、一方向のデータフローを促進します。 アクションハンドラーとしてのappDispatcher：
• アクションからストアにデータの更新を配布するための中央ハブ。 cosmic js cms統合：
アプリケーションデータを動的に管理およびフェッチし、スケーラビリティとメンテナビリティを向上させます。
• サーバーサイドレンダリング（SSR）：サーバーとクライアントの両方でReactアプリをレンダリングすることでSEOとパフォーマンスを向上させます。
• リファクタリング：
• 組織を改善するために、ファイルをリファクタリングして、ページルートを個々のコンポーネントに分離します。 更新されたコードには、データ管理用の
が含まれています。

routes.jsストア：真実の単一のソース

フラックスroutes.jsは、アプリケーションデータの単一の真実源として機能します。 重要な原則には、次のものが含まれます AppStore

直接dom操作はありません。

<code class="language-javascript">// 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>
)</route></route></route></route></route></indexroute></route></code>

uiはデータ駆動型です。データは店内に存在します。 UIの変更は、ストアデータの更新から発生します。

データは、小道具を介して高レベルから下位レベルのコンポーネントに一方向に流れます。 Store

ファイルはこれを実装します
2. 反応コンポーネント：スマートとダムデータ変更アクションは、高レベル（スマート）コンポーネントに限定され、下位レベル（ダム）コンポーネントはプロップに基づいてUIをレンダリングします。
3. コンポーネントはこれを示しています：

および

コンポーネントは、データが高レベルから低レベルのコンポーネントにどのように流れるかを示しています。 AppStore.js

（注：

<code class="language-javascript">// 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) }
})</code>

、

、、などの他のコンポーネントの完全なコードは、簡潔にして省略されていますが、参照されたgithubリポジトリで入手できます。）

App.jscosmic js構成とサーバー側のレンダリング

<code class="language-javascript">// 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></loading></div>)
    }
    const Routes = React.cloneElement(this.props.children, { data: data })
    return (
      <div>
        <nav data="{data}/">
        {Routes}
        <footer data="{data}/">
      </footer></nav>
</div>
    )
  }
}</code>

config.jsファイルは、宇宙JS CMSに接続するために使用されます。 app-server.jsファイルは、ReactDOMServer.renderToStaticMarkupを使用してサーバー側のレンダリングを処理します。 package.jsonスクリプトは、開発と生産のビルド用に構成されています。

結論

このチュートリアルは、堅牢でスケーラブルなReact Universalブログアプリを構築するための基盤を提供します。フラックスアーキテクチャとサーバー側のレンダリングを使用すると、パフォーマンス、SEO、および保守性が向上します。 完全なコードはGitHubで利用できます。 FAQセクションでは、フラックス、反応、およびユニバーサルアプリケーションに関する一般的な質問に対処しています。

以上がReact Universalブログアプリの構築：フラックスの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。