在create-react-app官方腳手架中引入redux資料管理工具

前言：從安裝腳手架到引入redux管理資料

直接開始

1.使用npm安裝腳手架工具

1）開啟命令列，全域性安裝create-react-app腳手架工具

npm install create-react-app -g

2)選擇好專案需要安裝的位置進行安裝，這裡安裝在d盤，這個過程事件稍微長一些，因為有很多依賴包需要去安裝

執行create-react-app mydemo，這裡已經安裝成功

3）根據幫助，切換到專案下並執行專案,就會看到官方的腳手架了

cd mydemo

npm start

4）專案結構如下圖所示，現在開始引入redux，它起的時一個資料管理的作用，具體的原理可以百度瞭解一下，推薦阮一峰老師的 Redux 入門教程（三）：React-Redux 的用法

5）安裝react，react-redux

宣告：redux是資料管理的一個庫，理論上和react沒有直接聯絡，我們安裝react-redux將他們聯絡起來

執行npm install --save redux react-redux

+ redux@4.0.1
+ react-redux@7.0.3
added 4 packages from 3 contributors and audited 888993 packages in 25.961s
found 0 vulnerabilities

6)安裝成功後，我們就可以開始引入了

在這之前我們需要知道資料的流向，下面是我個人的理解：

redux資料管理的話由三部分組成：store，action及reducer，其中store在action與reducer之間起到橋樑的作用，使資料變化能下發到你繫結的元件中去，action是宣告變數的，reducer中做資料的邏輯處理，整個流程可以理解為，action中宣告建立一個變數，由dispatch方法，將變化的資料傳遞到action中，由action連線到store，然後到reducer中做處理，儲存在state中，通過react-redux中Provider元件物件的store屬性，下發到繫結的所有元件中，使用react-redux中的connect連線資料到頁面，從state中拿到變化的資料，下面開始具體操作：

新建action.js,宣告一個變數，例如：AGE

建立一個reducer.js,函式ageVal就是一個reducer，從redux中使用combinReducers就是將多個reducer函式整合起來為一個rootRducer，一起輸出，並給了age一個初始化值為0，可以為任意數

下面可以在入口檔案index.js中引入，將狀態下發下去了

①首先從react-redux中引入Porvider元件物件，他的作用就是將狀態資料下發到其下的每一個元件中

import { Provider } from 'react-redux';

②建立createStore方法去建立一個store資料管理物件進行下發

import { creatStore } from 'redux'

再將合併好的reducer引到首頁

createStore(reducer)建立一個state

7）到這裡redux引入完成，我們修改一下初始化的age值為18，在頁面獲取一下看看

在App.js頁面中先引入connect，它的作用是將state的狀態資料連線到UI元件層面，也就是App.js頁面上，使用一個方法getVal來接受狀態變化，放在connect（）方法中作為引數，並且我們列印了state如下圖所示，我們將state.ageVal資料return到頁面上

使用this.props.xx,就可以拿到返回的資料了

這裡就可以在專案中使用redux管理資料了；