Redux 學習筆記01——Redux的簡介和安裝

寫在前面

這篇博客記錄的是我在學習Redux中的一些筆記，注意是Redux，而不是React-Redux。在你的Reac項目中，你應該權衡一下應該使用兩者中的哪個，後者雖然提供了便利，可是須要掌握額外的 API，而且要遵照它的組件拆分規範。我我的仍是比較喜歡使用Redux，因此一下的筆記都是關於Redux的知識。

在這片博客中，我會從零介紹如何在React項目中使用Redux，也算是一個面向小白的入門教程，但願能夠幫助到你們。

Redux 是什麼

對於前端小白來說，若是想要學習Redux，那麼你頗有可能已經學了一段時間的React.js，想要在React項目中使用Redux。因而你可能產生這樣一個想法：Redux是React的一個附屬品，或者是Redux包含於React中。

其實否則，Redux和React之間能夠說沒有任何關係，這徹底就是兩個框架。沒有Redux，React依然能夠活得好好的，能夠發揮本身原有的做用，只不過在Redux的加持下，React項目會變得更加完善。

舉個例子來講，React就像是一座圖書館，Redux就像是圖書館中的管理員。沒有管理員，圖書館依然能夠正常工做，你能夠本身圖書館找書，借書，還書。可是在尋找書的過程當中可能花費大量時間，在借書和還書的時候，須要本身在借書簿上面記錄，很是不方便，並且容易出錯。

可是有了管理員的幫助，你再去圖書館找書，就能夠詢問管理員，這本書在什麼位置，而後很方便地找到這本書。在借書和還書的時候，只須要把書交給管理員，而後出示本身的借書卡，讓管理員幫助咱們完成登記的工做。這樣對咱們來講，既方便有準確，開開心心的享受管理員帶來的服務。

參考這個例子，我再結合實際的React項目介紹一下Redux的做用。

你在學習React的時候會被告知：React是一個 視圖層 的框架，在一個基於React的項目中，它的主要做用是爲你應用的每個狀態設計簡潔的視圖，當數據改變時有效地更新並正確地渲染組件。可是React卻不擅長管理數據，特別是組件之間的數據產地，好比項目中的組件結構以下：

若是這個時候組件4想和組件10進行數據傳遞，你須要先把數據從組件10傳遞給組件9，而後以此把數據傳遞給組件七、組件一、組件二、組件3，最終達到組件4。這中間的代碼量和工做量可想而知。這還不是最糟糕的，最糟糕的是萬一傳遞的數據出現了問題，你都不知道是哪個組件形成的，還須要一個個的去調試。

在這個狀況下，咱們就須要一個方案來統一管理數據，在組件中直接引入須要的數據，而且使用統一的方式來修改數據。這個時候，Redux就排上用場了。若是咱們在項目中使用Redux管理數據，那麼你將體會到什麼叫作清晰明瞭、簡介方便。

說了這麼多，相信你對Redux有了一個大體清晰的認識，下面咱們就開始介紹如何具體的使用Redux吧。

Redux的安裝

Redux是一個數據層的框架，想要使用Redux，須要在項目中安裝，命令以下：

npm install --save redux
複製代碼

安裝完成以後，咱們就能夠開始咱們的Redux使用之旅了。