如何使用React，Redux和Immutable.js構建todo應用程序

> React的基於組件的架構和單向數據流使其非常適合UI結構。 但是，其狀態管理工具有意簡單，提醒我們反應主要處理模型視圖控制器（MVC）模式中的視圖。雖然僅使用React構建大型應用程序是可能的，但有效的代碼需要外部狀態管理。 >

>儘管沒有官方的反應狀態管理解決方案，但幾個庫與其範式無縫集成。本文展示了使用兩個這樣的庫進行react構建一個簡單的應用程序：redux and immable.js。

鑰匙要點：

通過提供集中式狀態容器和不變的數據結構，

redux and nismable.js增強了對大型應用的功能。 >
• 構建一個react，redux和immutable.js todo應用程序涉及創建組件，將數據轉換為不可能的js集合，定義狀態啟用的動作，設計還原器來處理操作並生成新狀態，並通過商店和容器連接一切。
• 最初的React和Redux生態系統最初看起來很複雜，但潛在的概念對於學習其他架構和語言而言是可轉移和有價值的，這對於Web開發至關重要。
• redux：集中式狀態容器

> Redux的靈感來自Flux和Elm，是一個輕巧的庫，充當應用程序狀態的中央存儲庫。 它使用以下原則來控制狀態的變化：

一個商店持有整個應用程序狀態。

>

狀態更新僅通過

>動作
1. 而不是直接突變。
Redux Store的Core是一個還原功能。此功能採用當前狀態和一個操作，返回a
2. 新狀態。 React組件向商店調度操作，隨後會根據需要觸發組件重新租賃。

immutablejs：不變的數據結構

由於Redux使用不變的數據結構強制執行此約束。 ImmuthableJs提供有效的不變收藏，並具有可變的界面，從Clojure和Scala中汲取靈感。

演示：一個簡單的待辦事項列表>

此示例使用React，Redux和ImmutableJS創建一個托DO列表，允許對任務進行添加和完成切換。 完整的代碼可在github上找到[鏈接到GitHub repo將轉到此處]。

設置

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，該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>

compile。

npm run build

react組件

我們將創建兩個組件：

>和

。 （在此處將插入組件代碼，類似於原始輸入，但可能會帶有較小的調整，以確保清晰度和簡潔）。 <todo></todo><todolist></todolist>redux和不變的集成

> 將虛擬數據轉換為ImmutableJs集合：（將虛擬數據轉換為不可能J的代碼將在此處插入）。 調整組件以使用不可分割的方法（例如，

而不是

）。

動作todo.get('id') todo.id

>定義用於添加和切換todos的動作創建者：（動作創建者代碼將在此處插入）。

還原器

>創建還原函數以處理操作並更新狀態：（還在此處插入還原器函數的代碼）。

連接組件和存儲>

創建商店，並使用

：（用於連接組件的代碼，包括容器和提供商在內的代碼，將在此處插入。

結論

> React和Redux生態系統具有陡峭的學習曲線，但基本原理是廣泛適用的。 本簡介為探索類似的架構和語言奠定了基礎。 對於現代網絡開發人員而言，基於動作的架構和不變數據的熟練程度越來越有價值。 關於將Redux與React一起使用REDUX的FAQ

react-redux（此處將在此處添加，重新格式化以提高可讀性，並可能縮短/匯總以簡短）

以上是如何使用React，Redux和Immutable.js構建todo應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！