React爬坑之路二：Router+Redux
上一篇寫了Antd和Axios的基本操作
之前大標題到五了那么這篇從六開始
ST也是初學小白可能講的完全不對
大家當做小說隨便讀讀消遣一下就好
React官網：https://reactjs.org/
菜鳥教程：http://www.runoob.com/react/react-tutorial.html
ES6入門: http://es6.ruanyifeng.com/
Ant Design：https://ant.design/index-cn
Redux: https://www.redux.org.cn/
Dva：https://github.com/dvajs/dva
先附上上一篇的鏈接。React爬坑之路一：React+Antd+Axios
在真正研究Dva前，我們除了先了解一些ES6，React，Antd，Axios的基本知識，還需要知道Router和Redux的工作原理。
六.React-Router配置路由
在實際應用中，我們不可能只有一頁頁面，切換頁面需要通過Router配置，這樣輸入不同的url就能看到不同的頁，或者點擊不同的按鈕可以在下方加載不同的組件。
（這里補充一下組件的概念，其實其本質就是一個類。在頁面中我們可以把頁面分為導航區，側邊欄，工作區等不同區域，每個區域都是一個組件，組件中還可以繼續細分為其他組件。想象在創建頁面的時候把不同的組件拿來組合在一起，頁頭頁尾這種公用組件可以始終保持不動，只切換我們想切換的區域。）
一般來講，我們用React-router-dom來實現，它提供了BrowserRouter, Route, Link等api，讓我們可以通過dom事件控制路由。
第一步還是安裝。
npm install react-router-dom --save
這時我們新建兩個組件aaa.js和bbb.js。
import React, { Component } from ‘react’;
class AAA extends Component {
render() {
return (
AAA
)
}
}
export default AAA;
import React, { Component } from ‘react’;
class BBB extends Component {
render() {
return (
BBB
)
}
}
export default BBB;
并且在首頁上搞兩個按鈕。（不會搞的請去看上一篇）
假裝是導航.png
然后，將剛剛的兩個組件，和React-router-dom中的一些api導入首頁app.js。這里我們用了BrowserRouter，當然也可以用HashRouter，差別就是地址欄有沒有#。嗯比如用HashRouter地址欄就是http://localhost:3000/#/。（好像還有別的差別但是我不知道Σ(⊙▽⊙"））
import { BrowserRouter, Route, Link, Switch } from ‘react-router-dom’;
import AAA from ‘./aaa’;
import BBB from ‘./bbb’;
然后在Dom里用Link來改變地址欄的url，注意Link，Route這些api都需要寫在里
此時點擊按鈕可以看到地址欄是改變的，會變成http://localhost:3000/aaa和http://localhost:3000/bbb。
然后，在下方加上要通過路由切換的組件，當path為aaa或者bbb的時候分別加載AAA和BBB。
此時，在瀏覽器中點擊兩個按鈕，應該能看到下方可以切換兩種組件啦。
AAA.png
BBB.png
這是最簡單的一個路由的實現。在實際的開發中，一般來講我們會在上方或左側簡歷導航欄，通過給導航欄元素添加來加載頁面剩下的內容。聽起來有點像iframe？但是路由切換不會像iframe一樣直接加載一個頁面進來，只是通過路徑匹配組件的切換。
當然，實際的開發中我們也不會這么不規范的直接把路由都寫在首頁里，一般會單寫一個router.js專門負責路由的控制。在后面的Dva框架中，我們會看到Dva把路由、公用組件、模型文件、服務文件等在創建工程時就幫我們分類好了，這樣整個工程結構就非常清晰。
六.Redux管理狀態
在前一篇中我們說了，state是react特有的一個存儲數據的地方，我們通過各種操作可以改變state的值，然后更新到頁面顯示上。
但是，當工程變得非常龐大且復雜的時候，各種各樣的state和更新state的方法就會使程序變得很亂。在我們后臺開發的時候，一向很講究邏輯對不對，而前后端分離的情況下，管理前端這些數據，我們也需要進行“有條理的對數據進行操作”。
而進行這個操作的，就是Redux。
Redux提供一些api來管理數據，Redux很霸道地告訴我們：數據只能存在我這，并且只能通過我的方式來修改！
它包括三部分：store，action，reducer。
store是一個……規范的state，就像一個有條理的數據庫，Redux將整個應用的state儲存在唯一的store中。
action是……一個有屬性的對象，或者說描述了發生了什么的對象，用dispatch（action）來觸發，并且這是改變state的唯一方式。
reducer是……具體通過action更新state的那個函數，基本結構是，reducer(state, action) => newstate
簡單地講，state是雞翅，action是烤熟了的雞翅，reducer是烤！
（好了，作為一個邏輯思維為0數學從沒及過格的人，我們就了解到這吧……什么，還是得實踐一下代碼嗎Σ(⊙▽⊙"）我明明是個設計師啊……）
那么我們繼續回到上一篇的那個例子上。比如我們有這樣一個表格，現在我們想用Redux的方式做一些更改。（用Antd生成列表請看上一篇）
例子.png
首先要用npm或者yarn裝上redux。
npm install --save redux
我們大致知道了要創建一個store，并且定義好action和reducer，那么一步一步開始。
一. 創建store
第一步在app.js中，引入redux包中的createStore()方法。
import { createStore } from ‘redux’;
然后，通過createStore(reducers[，initialState])的方式來創建store，這個方法根據 reducer生成store，并且只能通過此reducer來改變store中的狀態，第二個參數是可選的默認初始值。
注意，一個應用中我們只有一個store，存儲了全部數據狀態，但是會有很多reducer，通過這些reducer合起來創建store需要用到combineReducers方法。
但是我現在只想做一個簡單操作，所以用一個reducer做例子。
//初始狀態
const initialState = {
……
data: [{
“key”: “1”,
“name”: “王大斌”,
“gender”: “男”
},{
“key”: “2”,
“name”: “劉小洋”,
“gender”: “男”
}]
}
//創建reducer方法，先原封不動返回state
const myreducer = (state=initialState, action) => {
return state;
}
//創建store存儲區，它只能通過reducer作為參數來構造
const store = createStore(myreducer);
這樣store就創好了，可以把store打印到控制臺看一下。getState()是store的一個最常見api，用了獲取state的值。
console.log("initial state: ", store.getState());
store中的狀態.png
Very well，接下來寫一個更新state的action。
二. 創建action
Action 是一個帶屬性的對象，其屬性用type來定義，type是必填項，其他的還可以有附帶數據，一般寫在用payload里。
//創建描述性對象action
const myaction = {
type: ‘ADD_DATA’,
payload: {
“key”: “3”,
“name”: “張胖卓”,
“gender”: “男”
}
};
上面已經說過，修改state的唯一方法就是dispatch(action)，那么現在我們就把這個action觸發一下。
store.dispatch(myaction);
如果是點擊一個按鈕觸發的話，把dispatch放在onClick綁定的函數里就行。
//點擊按鈕觸發
const changeData = () => {
store.dispatch(myaction);
}
class App extends Component {
render() {
return (
修改數據
……
);
}
}
三. 創建reducer
Store觸發了一個action，相當于store宣稱：“我要改變自己的state”，此時，需要reducer來執行這個過程。
Reducer的輸入參數是當前的state和收到的action，他會返回一個新的 state。注意在reducer中，不能隨意更改參數或者加入隨機性的各種操作，也就是reducer輸入相同的話，輸出也必定相同。
我們修改剛剛的reducer如下。
//創建reducer方法
const myreducer = (state=initialState, action) => {
switch (action.type) {
case ‘ADD_DATA’:
return {
…state,
data:state.data.concat(action.payload)
}
default:
return state;
}
}
…state是ES6中的三點運算符，作用是把數組打開進行操作。
可以看到，當action是ADD_DATA的時候，我們把payload里面的內容加在原有的data之后，也就是新加一行數據。
這時，在控制臺輸出store的值，可以看到已經有所改變。
console.log("change state: ", store.getState());
更新后的store.png
四. 通過監聽更新視圖
然而，現在視圖上卻沒有刷新，只是store中的值改變了。（這個問題糾結了我兩天= =）是因為store跟view層并沒有連起來，如果不手動重新render，頁面是不會變化的，為此我們需要一個監聽函數，監聽store中值的變化，當發生變化時重新渲染view。
這個監聽由store.subscribe實現。（如果你用了react-redux的話，它里面的connect讓我們不需要自己手動去subscribe全局state的變化，它會在內部自動監聽并更新。）
class App extends Component {
listerner() {
let newState = store.getState();
this.setState(newState);
}
//保持監聽
componentDidMount () {
store.subscribe(this.listerner.bind(this));
}
}
這樣，整個流程實現了：
創建store存儲數據，并把初始值綁定到view層。
點擊按鈕，觸發store.dispatch(myaction)。
store收到action后，調用myreducer = (state=initialState, action)改變store中的state。
store更新后，通過store.subscribe監聽函數更新view層。
最終的成果如下：
最終效果.png
ヽ(?ﾟ▽ﾟ)ノ雖然很混亂不過總算似乎是實現了整套流程。
【很重要的補充說明！】
在上面的例子里，我們只用了redux，事實上在React中，我們一般常用react-redux來進行操作。react-redux提供的結構可以讓我們不需要自己手動去寫dispatch，subscribe這些函數，它在內部通過自身的結構幫我們完成了這些操作。
而Dva，（終于說到了Dva！），它已經封裝好了react-router，react-redux，redux-saga等中間件，并給出了清晰地工程目錄結構。因而在了解react基礎知識后，用Dva來構建工程更加快捷簡便。
那么，下一篇，我們就來真正用Dva創建一個工程并進行一些簡單操作~
請戳React爬坑之路三：Dva
作者：saint37
鏈接：https://www.jianshu.com/p/dbf6dda29401
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
總結
以上是生活随笔為你收集整理的React爬坑之路二：Router+Redux的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工信部191号文《App违法违规收集使用
- 下一篇： Python_Dataframe_去除重