React、Redux、およびImmutable.jsを使用してTodoアプリを構築する方法

Reactのコンポーネントベースのアーキテクチャと一方向のデータフローにより、UIの構造化に最適です。 ただし、その状態管理ツールは意図的にシンプルであり、Model-View-Controller（MVC）パターンのビューを主に処理することを反応させることを思い出させます。 Reactのみを使用して大規模なアプリケーションを構築することは可能ですが、効率的なコードには外部の状態管理が必要です。

公式の反応状態管理ソリューションは存在しませんが、いくつかのライブラリはそのパラダイムとシームレスに統合されています。この記事では、2つのそのようなライブラリを使用して、ReduxとImmutable.js。

キーテイクアウト：

ReduxとImmutable.jsは、集中状態のコンテナと不変のデータ構造を提供することにより、より大きなアプリケーションのReactの機能を強化します。

反応、redux、およびImmutable.js Todoアプリの構築には、コンポーネントの作成、データの不変jsコレクションへの変換、状態の設定アクションの定義、還元剤の設計、アクションを処理し、新しい状態を生成し、ストアとコンテナを介してすべてを接続することが含まれます。 。
反応とReduxのエコシステムは最初は複雑に見えることがありますが、基礎となる概念は他のアーキテクチャや言語を学習するために移転可能で価値があり、Web開発に不可欠です。
• redux：集中状態のコンテナ

Flux and ELMに触発されたReduxは、アプリケーション状態の中央リポジトリとして機能する軽量ライブラリです。 次の原則を使用して、状態の変更を管理します：

単一のストアがアプリケーション状態全体を保持しています。

状態の更新は、直接的な突然変異ではなく、

アクション

によってのみ発生します

1. Reduxストアのコアは還元剤機能です。この関数は、現在の状態とアクションを取り、
新しい
2. 状態を返します。 反応コンポーネントは、アクションをストアに派遣し、その後、必要に応じてコンポーネントの再レンダーをトリガーします。 Immutablejs：不変のデータ構造

reduxは直接状態の突然変異を防ぐため、不変のデータ構造を使用するとこの制約が施行されます。 ImmutableJsは、ClojureとScalaからインスピレーションを得て、可変性のあるインターフェイスを備えた効率的な不変のコレクションを提供しています。 デモ：シンプルなtodoリスト

この例では、React、Redux、およびImmutableJsを使用して、タスクの追加と完了を可能にするTODOリストを作成します。 完全なコードはgithubで入手できます[Githubリポジトリへのリンクはこちらに行きます]。

setup

1. プロジェクトフォルダーを作成し、package.json npm init必要な依存関係をインストールする：

<code class="language-bash">npm install --save react react-dom redux react-redux immutable
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react</code>

JSXとES2015を使用して、Webpackを介してBabelとコンパイルされます。

：
3. を作成します webpack.config.js

<code class="language-javascript">module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: ['es2015', 'react'] }
      }
    ]
  }
};</code>

ビルドスクリプトを追加して、

：
4. に追加します package.json

run

<code class="language-json">"scripts": {
  "build": "webpack --debug"
}</code>

コンパイルします。

npm run build

反応コンポーネント

2つのコンポーネントを作成します：

と

。 （元の入力と同様に、ここにコンポーネントコードが挿入されますが、明確さと簡潔さのためにマイナーな調整があります）。 <todo></todo><todolist></todolist>reduxと不変の統合

ダミーデータをImmutableJSコレクションに翻訳します。 コンポーネントを調整して、ImmutableJSメソッドを使用します（

の代わりにアクション

todo.get('id') todo.id todosを追加および切り替えるためのアクションクリエイターを定義します：（アクションクリエイターのコードがここに挿入されます）。

reducer

アクションを処理して状態を更新する還元剤関数を作成します。

コンポーネントの接続とストアを作成して、：（コンポーネントとプロバイダーを含むコンポーネントとストアを接続するためのコードを使用してReactコンポーネントに接続すると、ここに挿入されます）。 結論

ReactとReduxの生態系には急な学習曲線がありますが、根本的な原則は広く適用可能です。 この紹介は、同様のアーキテクチャと言語を探索するための基盤を提供します。 アクションベースのアーキテクチャと不変のデータの習熟度は、最新のWeb開発者にとってますます価値があります。 Reduxを使用したReduxを使用する FAQ（このセクションはここに追加され、より良い読みやすさのために再フォーマットされ、潜在的に短縮/要約されます）

以上がReact、Redux、およびImmutable.jsを使用してTodoアプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。