react-redux 的總結

　　第一步，咱們將咱們要使用的插件來先一步進行安裝

　　　　create-react-app app  // 在這裏咱們使用了 react 的腳手架來搭建的項目

　　　　cd app 　　　　　　 // 進入咱們的項目

　　　　npm i -S redux 　　// 這裏時咱們須要下載的 redux 組件通訊的插件

　　　　npm i -S prop-types 　　// 咱們的較驗規則

　　　　npm i -S react-redux　　// 咱們的 react 版的 redux 爲了就是更方便的使用 redux

　　　　npm i -S redux-thunk　　// 異步加載咱們的代碼

　　　　npm i -D redux-devtools-extension　　// 咱們能夠在谷歌中下載 redux 的插件，而後在項目中下載 redex-devtools-extension 的插件，咱們就能在谷歌瀏覽器中實時的掌握 redux 的數據

　　　　npm i -S react-router　　// 咱們的路由插件

　　這樣咱們便把咱們想要的東西都下載的差很少了，ui 框架，則是看我的的喜愛來進行下載，咱們在這裏主要說的時 react-redux 在 react 中的用法（組件之間的通訊）

　　第一步：目錄，在 src 下的目錄建立一個 store 的文件

　　　　store 的文件下，擁有 4 個文件夾，分別是 actions-type.js　　actions.js　　reducers.js　　store.js 的文件，咱們的數據都是在這裏面進行操做

　　　　在這裏說一下，react 推薦咱們將組件分爲 ui 組件和邏輯組件，可是，咱們仍是將其合爲一體的好，爲了代碼的可讀性；

　　　　好比咱們要修改 store 裏面的數據，咱們應該將數據交給 actions.js ，將邏輯代碼交給 reducers.js，actions-type.js 表明咱們寫的事件什麼的必定要是惟一的，store.js 表明咱們進行配置 store；

　　組件將會經過由 Provider 中將裏面的數據，傳給全部的組件，均可以經過 connect 裏面，綁定事件，而後經過 this.props 來進行接收

　　老規矩：來看每一個文件的代碼

　　　　actions-type.js　　在這裏咱們將事件的類型變成惟一的，防止進行錯誤的操做

　　　　

　　　　actions.js　　在這裏咱們處理的就是組件傳遞過來的事件數據，設置 type 類型，而後咱們的 異步加載數據，也是在這裏實現的

　　　　

 

 　　　　reducers.js　　在這裏，咱們獲得了數據獲得的數據，咱們就要處理邏輯的東西，而且咱們不能改變原始的數據，只能返回新的對象

　　　　

 

 　　　　  // 這裏呢，咱們是有兩個數據來進行這樣的處理，因此要使用 redux 中帶的東西

 

　　　　store.js　　在這裏咱們要對數據管理對象 store 來進行配置，在這裏咱們須要使用中間件，createStore() 的第二個參數，就是一箇中間件，來配置 store 對象

　　　　

 

 　　　　Index.js　　// 在這裏咱們主要是渲染頁面，而後將 store 放在了 Provider 的組件上，App 是咱們最大的跟組件，這樣咱們就能經過 redux 的方法，來獲取到 actions.js 來提供的方法，是咱們將數據放進去

　　　　

 

 　　　　App.js 　　react-redux 提供了 connect 的方法，來將 state 數據，和 方法，放在了 App 的組件上，使咱們的組件就能夠經過 props 來使用這些方法和數據了

　　　　

 

 　　　　

 

 　　　　Left.js  (Left 組件) 咱們的子組件和不想關的組件，咱們也可使用 store 的方法，咱們在任何地方均可以使用，咱們的使用方法和 App 組件的相似，只不過最後暴露的 Left 組件