一、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 (<div><h1>AAA</h1></div>)} } export default AAA; import React, { Component } from 'react';class BBB extends Component {render() {return (<div><h1>BBB</h1></div>)} } export default BBB;

并且在首頁上搞兩個按鈕。（不會搞的請去看上一篇 https://blog.csdn.net/qq_40241957/article/details/100726297）

然后，將剛剛的兩個組件，和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都需要寫在<BrowserRouter>里

<BrowserRouter> <div className="App"><Button type="primary"><Link to='/aaa'>假裝自己是個導航</Link></Button><Button><Link to='/bbb'>假裝自己是另一個</Link></Button></div></BrowserRouter>

此時點擊按鈕可以看到地址欄是改變的，會變成http://localhost:3000/aaa和http://localhost:3000/bbb。
然后，在下方加上要通過路由切換的組件，當path為aaa或者bbb的時候分別加載AAA和BBB。

<BrowserRouter> <div className="App"><Button type="primary"><Link to='/aaa'>假裝自己是個導航</Link></Button><Button><Link to='/bbb'>假裝自己是另一個</Link></Button><Switch> //下面的exact是精準匹配的意思，比如當path=“/”時，就只能匹配/,不能匹配其他的比如/aaa,/bbb<Route path="/aaa" exact component={AAA} /><Route path="/bbb" exact component={BBB} /></Switch></div></BrowserRouter>

此時，在瀏覽器中點擊兩個按鈕，應該能看到下方可以切換兩種組件啦。

這是最簡單的一個路由的實現。在實際的開發中，一般來講我們會在上方或左側建立導航欄，通過給導航欄元素添加<Link>來加載頁面剩下的內容。聽起來有點像iframe？但是路由切換不會像iframe一樣直接加載一個頁面進來，只是通過路徑匹配組件的切換。
當然，實際的開發中我們也不會這么不規范的直接把路由都寫在首頁里，一般會單寫一個router.js文件專門負責路由的控制。在后面的Dva框架中，我們會看到Dva把路由、公用組件、模型文件、服務文件等在創建工程時就幫我們分類好了，這樣整個工程結構就非常清晰。

二、Redux管理狀態

在前一篇中我們說了，state是react特有的一個存儲數據的地方，我們通過各種操作可以改變state的值，然后更新到頁面顯示上。
但是，當工程變得非常龐大且復雜的時候，各種各樣的state和更新state的方法就會使程序變得很亂。在我們后臺開發的時候，一向很講究邏輯對不對，而前后端分離的情況下，管理前端這些數據，我們也需要進行“有條理的對數據進行操作”。
而進行這個操作的，就是Redux。
Redux提供一些api來管理數據，Redux很霸道地告訴我們：數據只能存在我這，并且只能通過我的方式來修改！
它包括三部分：store，action，reducer。

store就像一個有條理的數據庫，Redux將整個應用的state儲存在唯一的store中。

action是……一個有屬性的對象，或者說描述了發生了什么的對象，用dispatch（action）來觸發（解釋：在Dva框架搭建的項目中一般是通過model層來調用dispatch（action）），并且這是改變state的唯一方式。

reducer是……具體通過action更新state的那個函數，基本結構是，reducer(state, action) => newstate

那么我們繼續回到上一篇的那個例子上。比如我們有這樣一個表格，現在我們想用Redux的方式做一些更改。（用Antd生成列表請看上一篇https://blog.csdn.net/qq_40241957/article/details/100726297）

首先要用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());

接下來寫一個更新state的action。

二. 創建action

Action 是一個帶屬性的對象，其屬性用type來定義，type是必填項，其他的還可以有附帶數據，一般寫在用payload里。

//創建描述性對象action const myaction = {type: 'ADD_DATA', payload: { //payload是附帶數據的意思 "key": "3","name": "張胖卓","gender": "男"} };

上面已經說過，修改state的唯一方法就是dispatch(action)（說明：在dva框架中分層開發的時候是一般在model層調用該方法），那么現在我們就把這個action觸發一下。

store.dispatch(myaction);

如果是點擊一個按鈕觸發的話，把dispatch放在onClick綁定的函數里就行。

//點擊按鈕觸發 const changeData = () => {store.dispatch(myaction); }class App extends Component {render() {return ( <Button type="primary" onClick={changeData}>修改數據</Button>……);} }

三. 創建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, // ...state的作用是把state里的數據以鍵值對的形式放在這里//下面的一行代碼是覆蓋原state里的鍵為“data”的數據data:state.data.concat(action.payload) //在本例中concat()的作用是在原state.data數據的后面連接上payload數據}default: return state;} }

...state是ES6中的三點運算符，作用是把數組打開進行操作。
可以看到，當action是ADD_DATA的時候，我們把payload里面的內容加在原有的data之后，也就是新加一行數據。
這時，在控制臺輸出store的值，可以看到已經有所改變。

console.log("change state: ", store.getState());

四. 通過監聽更新視圖

然而，現在只是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里的state數據發生變化，就立刻執行這里我們自定義的listener函數來更新view視圖展示層} }

講解：這樣，整個流程實現了：

創建store存儲數據，并把初始值綁定到view層。

點擊按鈕，觸發store.dispatch(myaction)。

store收到action后，調用myreducer = (state=initialState, action)改變store中的state。

store更新后，通過store.subscribe監聽函數更新view層。

最終的成果如下：

雖然很混亂不過總算似乎是實現了整套流程。

【很重要的補充說明！】

在上面的例子里，我們只用了redux，事實上在React中，我們一般常用react-redux來進行操作。react-redux提供的結構可以讓我們不需要自己手動去寫dispatch，subscribe這些函數，它在內部通過自身的結構幫我們完成了這些操作。
而Dva，（終于說到了Dva！），它已經封裝好了react-router，react-redux，redux-saga等中間件，并給出了清晰地工程目錄結構。因而在了解react基礎知識后，用Dva來構建工程更加快捷簡便。
那么，下一篇，我們就來真正用Dva創建一個工程并進行一些簡單操作~
Dva學習文章如下鏈接：
https://blog.csdn.net/qq_40241957/article/details/100692742

本文轉載自;https://www.jianshu.com/p/dbf6dda29401

總結

以上是生活随笔為你收集整理的Router+Redux学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。