我的一個配置redux（實現一次儲存與呼叫方法）之旅
前言 ： 今天呢，就配置一下redux，redux的重要性呢，就叭叭叭一大堆，什麼也沒有帶著配置一次來的重要，因為許多涉及到的屬性和方法，用法是活的，但格式是需要記憶的。
過程中不要嫌我嘮叨，有的地方為了便於理解和記憶，反而會繞一下，配置redux的確比較麻煩，用到我們平時不常用的方法，我們不熟悉他們，所以會使用過程需要記憶。
（1）首先呢，安裝redux環境
一個穩定版的redux和一個redux繫結庫
1 npm install redux --save 2 npm install react-redux --save
本行程式碼純屬友情贈送，看到了就是賺到了，一個redux開發者工具
npm install redux-devtools --save-dev
是在這裡用滴：
然後我們檢查package，已經完成。
（2）現在呢，感受這3個重要的概念action，reducer以及store。
Action 作用：
1、用Action來分辨具體的執行動作。比如我是要新增一個專案還是刪除一個專案。
2、操作資料首先得有資料。比如新增資料得有資料，刪除資料得有ID。action就是存這些資料的地方。
3、不帶其他資料，僅僅啟示已有資料需要如何調整，或者需要主動獲取哪些資料。如果我要刪除掉全部資料，只要告知這件事即可
Reducer的作用：
官方描述：Action 只是描述了有事情發生了這一事實，並沒有指明應用如何更新 state。這是 reducer 要做的事情。
這麼說吧，Action就像一個指揮者，告訴我們應該做哪些事，比如我要刪除，reducer就會給我們提供‘資源（就是上面說的資料）’，真正的體力勞動者是reducer。
也就是說，action裡面的每一種描述，比如新增啦，刪除一個，刪除全部啦，reducer都有一個對應的函式來處理資料。之後返回給你一個新的state
reducer 只是一個模式匹配的東西，真正處理資料的函式，是額外在別的地方寫的，在 reducer 中呼叫罷了。
※：reducer：縮減 （我們用來寫方法的）因為 action 物件各種各樣，每種對應某個 case ，但最後都彙總到 state 物件中，從多到一，這是一個減少( reduce )的過程，所以完成這個過程的函式叫 reducer。
Store:
前面兩個，我們知道使用 action 來描述“發生了什麼”，和使用 reducers 來根據 action 更新 state 的用法。
Store 就是把它們聯絡到一起的物件。Store 有以下職責：
- 維持應用的 state；
- 提供 getState() 方法獲取 state；
- 提供 dispatch(action) 方法更新 state；
- 通過 subscribe(listener) 註冊監聽器
（3）接下來建立actions資料夾，再新建一個reducers資料夾，並建立各自的index.js。
建立資料夾不截圖了。。。index先空著，等下補充。
（4）我們需要將actions和reducers關聯起來（截圖對比程式碼，菜鳥請注意）
未修改的src的index.js：
現在呢，從react-redux庫裡，調出Provider方法，從redux裡拿出creatStore方法。
import { Provider } from 'react-redux';
import { creatStore } from 'redux';
React-Redux提供了兩個介面Provider、connect。
Provider 是一個React元件，它的作用是儲存store給子元件中的connect使用。
connect 會把State和dispatch轉換成props傳遞給子元件。我的理解是，因為所有的資料都集中在了 store中，Provider從那裡把store的資料拿了過來。給它的好朋友 connect，connect是聯絡，連線的意思嘛，所以它將好朋友provider的資料拿了過來，讓它供那些子元件使用。
import rootReducer from "./reducers"
將reducers檔案引入（如果是引入檔案，預設引入的是index.js）。
我們建立一個倉庫store：我們用建立庫方法來以存放應用中所有的 state。
const store = createStore(rootReducer)
用Provider包裹App模組，然後作為Hello模組丟擲，在根節點中渲染
const store = createStore(rootReducer)
export default class Hello extends Component {
render() {
return (
<Provider store={ store }>
<div>
<App/>
</div>
</Provider>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
最後的程式碼是這個樣子的（執行之後包Component報錯的，注意看圖片上的第一個藍框）：
這段程式碼的作用，總體上來說應該這樣表述：
我建立了一個Hello模組來給大家展示redux,建立Hello模組將App標籤包裹，但是,我們用Provider元件將return出來的東西包裹，connect方法生成容器元件以後，需要讓容器元件拿到state物件，才能生成 UI 元件的引數。這樣，App的所有子元件就預設都可以拿到state了。同時，我們直接渲染到root根節點的App也就改成了Hello。
（5）接下來配置reducers的index.js
在這個index裡，我們要做的，就是將裡面所有的小的reducers整合起來，然後丟擲。我這裡假設用page01和page02來分開管理小的reducers，當然，你不嫌麻煩可以把所有的功能都寫在主檔案裡。
我的page1和2裡都沒有寫方法，等下再進行功能的編寫。
（6）配置actions裡面的index.js
在這個index，我們要做的呢，是將所有的方法丟擲，也是兩個空的，額，等下就寫。。。
（7）執行除錯
這次執行呢，就是看看我的元件能不能正常載入。。。因為你沒仔細看我的index.js裡的第一個藍框，就有可能報這個錯：
其他錯誤請自己逐漸除錯，因為我的已經正常執行。
（8）既然搭建了redux，然後我們要實現一個方法，點選自增。。。
（笑噴了自己，這個方法是演示方法中，最常用也是最low的demo，自己認為。。。）
註釋給的很詳細了
（9）配置reducer的counter1
我們把方法反出去，這裡是把自增的方法反出去了
（10）主元件的一些個操作（兩張圖並一張）：
註釋已經很清楚了
mapStateToProps 是一個函式(函式名可以自定義)，它的作用就像它的名字那樣，建立一個從（外部的）state物件到（UI元件的）props物件的對映關係。由此你就可以推測，mapDispathToProps的意思和這個是差不多的，分發方法。
（11）此時的頁面效果：
我點選的效果：
恭喜自己，功能實現了。
（12）程式碼給你們（index的）
1 import React, { Component } from 'react'
2
3 import './App.css';
4
5 import { connect } from "react-redux" //從react-redux裡拿到connect方法
6 import { counterCreator } from "./actions" //暴露counterCreator這個方法
7
8 class App extends Component {
9 constructor(props){
10 super(props)
11 this.state={}
12 }
13
14 handleClick=()=>{
15 this.props.numAdd()
16 }
17
18 render() {
19 return (
20 <div className='Box'>
21 <h3>{this.props.$$num}</h3>
22 <button onClick={this.handleClick}>點選自增</button>
23 </div>
24 )
25 }
26 }
27
28 //資料
29 const mapStateToProps = (state) => {
30 console.log(state)
31 return {
32 $$num : state.page01.num //$$只是一個標識，建議加
33 }
34 }
35
36 //dispatch 分發方法
37 const mapDispathToProps = (dispatch) => {
38 return{
39 numAdd : () => dispatch(counterCreator.numAdd())
40 }
41 }
42
43 //connect 高階元件、高階函式 傳入一個元件=>返回一個新的元件
44 export default connect(
45 mapStateToProps,
46 mapDispathToProps
47 )(App)
感悟：暫時憑自己的知識儲備是配置不了的，希望自己一直進步，學不會的時候，千萬別停下來，戒驕戒躁，加油！
&n