React爬坑之路二：Router+Redux

上一篇寫了Antd和Axios的基本操作
之前大標題到五了那么這篇從六開始
ST也是初學小白可能講的完全不對
大家當做小說隨便讀讀消遣一下就好

React官網(wǎng)：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就能看到不同的頁，或者點擊不同的按鈕可以在下方加載不同的組件。
（這里補充一下組件的概念，其實其本質(zhì)就是一個類。在頁面中我們可以把頁面分為導航區(qū)，側(cè)邊欄，工作區(qū)等不同區(qū)域，每個區(qū)域都是一個組件，組件中還可以繼續(xù)細分為其他組件。想象在創(chuàng)建頁面的時候把不同的組件拿來組合在一起，頁頭頁尾這種公用組件可以始終保持不動，只切換我們想切換的區(qū)域。）
一般來講，我們用React-router-dom來實現(xiàn)，它提供了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;

并且在首頁上搞兩個按鈕。（不會搞的請去看上一篇）

假裝是導航.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都需要寫在<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>
            <Route path="/aaa" exact component={AAA} />
            <Route path="/bbb" exact component={BBB} />
        </Switch>
      </div>
    </BrowserRouter>

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

AAA.png
BBB.png

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

六.Redux管理狀態(tài)

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

  1. store是一個……規(guī)范的state，就像一個有條理的數(shù)據(jù)庫，Redux將整個應用的state儲存在唯一的store中。
  2. action是……一個有屬性的對象，或者說描述了發(fā)生了什么的對象，用dispatch（action）來觸發(fā)，并且這是改變state的唯一方式。
  3. reducer是……具體通過action更新state的那個函數(shù)，基本結(jié)構(gòu)是，reducer(state, action) => newstate

簡單地講，state是雞翅，action是烤熟了的雞翅，reducer是烤！

（好了，作為一個邏輯思維為0數(shù)學從沒及過格的人，我們就了解到這吧……什么，還是得實踐一下代碼嗎Σ(⊙▽⊙"）我明明是個設計師啊……）

那么我們繼續(xù)回到上一篇的那個例子上。比如我們有這樣一個表格，現(xiàn)在我們想用Redux的方式做一些更改。（用Antd生成列表請看上一篇）

例子.png

首先要用npm或者yarn裝上redux。

npm install --save redux

我們大致知道了要創(chuàng)建一個store，并且定義好action和reducer，那么一步一步開始。
一. 創(chuàng)建store
第一步在app.js中，引入redux包中的createStore()方法。

import { createStore } from 'redux';

然后，通過createStore(reducers[，initialState])的方式來創(chuàng)建store，這個方法根據(jù) reducer生成store，并且只能通過此reducer來改變store中的狀態(tài)，第二個參數(shù)是可選的默認初始值。
注意，一個應用中我們只有一個store，存儲了全部數(shù)據(jù)狀態(tài)，但是會有很多reducer，通過這些reducer合起來創(chuàng)建store需要用到combineReducers方法。
但是我現(xiàn)在只想做一個簡單操作，所以用一個reducer做例子。

//初始狀態(tài)
const initialState = {
    ……
    data: [{
        "key": "1",
        "name": "王大斌",
        "gender": "男"
      },{
        "key": "2",
        "name": "劉小洋",
        "gender": "男"
      }]
}
//創(chuàng)建reducer方法，先原封不動返回state
const myreducer = (state=initialState, action) => {
  return state;
}
//創(chuàng)建store存儲區(qū)，它只能通過reducer作為參數(shù)來構(gòu)造
const store = createStore(myreducer);

這樣store就創(chuàng)好了，可以把store打印到控制臺看一下。getState()是store的一個最常見api，用了獲取state的值。

console.log("initial state: ", store.getState());
store中的狀態(tài).png

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

二. 創(chuàng)建action
Action 是一個帶屬性的對象，其屬性用type來定義，type是必填項，其他的還可以有附帶數(shù)據(jù)，一般寫在用payload里。

//創(chuàng)建描述性對象action
const myaction = {
  type: 'ADD_DATA',
  payload: {
        "key": "3",
        "name": "張胖卓",
        "gender": "男"
  }
};

上面已經(jīng)說過，修改state的唯一方法就是dispatch(action)，那么現(xiàn)在我們就把這個action觸發(fā)一下。

store.dispatch(myaction);

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

//點擊按鈕觸發(fā)
const changeData = () => {
    store.dispatch(myaction);
}

class App extends Component {
    render() {
        return ( 
            <Button type="primary" onClick={changeData}>修改數(shù)據(jù)</Button>
            ……
        );
    }
}

三. 創(chuàng)建reducer
Store觸發(fā)了一個action，相當于store宣稱：“我要改變自己的state”，此時，需要reducer來執(zhí)行這個過程。
Reducer的輸入?yún)?shù)是當前的state和收到的action，他會返回一個新的 state。注意在reducer中，不能隨意更改參數(shù)或者加入隨機性的各種操作，也就是reducer輸入相同的話，輸出也必定相同。
我們修改剛剛的reducer如下。

//創(chuàng)建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中的三點運算符，作用是把數(shù)組打開進行操作。
可以看到，當action是ADD_DATA的時候，我們把payload里面的內(nèi)容加在原有的data之后，也就是新加一行數(shù)據(jù)。
這時，在控制臺輸出store的值，可以看到已經(jīng)有所改變。

console.log("change state: ", store.getState());
更新后的store.png

四. 通過監(jiān)聽更新視圖
然而，現(xiàn)在視圖上卻沒有刷新，只是store中的值改變了。（這個問題糾結(jié)了我兩天= =）是因為store跟view層并沒有連起來，如果不手動重新render，頁面是不會變化的，為此我們需要一個監(jiān)聽函數(shù)，監(jiān)聽store中值的變化，當發(fā)生變化時重新渲染view。
這個監(jiān)聽由store.subscribe實現(xiàn)。（如果你用了react-redux的話，它里面的connect讓我們不需要自己手動去subscribe全局state的變化，它會在內(nèi)部自動監(jiān)聽并更新。）

class App extends Component {
    listerner() {
      let newState = store.getState();
      this.setState(newState);   
    }
    //保持監(jiān)聽
    componentDidMount () {
        store.subscribe(this.listerner.bind(this));
    }
}

這樣，整個流程實現(xiàn)了：

  1. 創(chuàng)建store存儲數(shù)據(jù)，并把初始值綁定到view層。
  2. 點擊按鈕，觸發(fā)store.dispatch(myaction)。
  3. store收到action后，調(diào)用myreducer = (state=initialState, action)改變store中的state。
  4. store更新后，通過store.subscribe監(jiān)聽函數(shù)更新view層。

最終的成果如下：

最終效果.png

ヽ(??▽?)ノ雖然很混亂不過總算似乎是實現(xiàn)了整套流程。

【很重要的補充說明！】

在上面的例子里，我們只用了redux，事實上在React中，我們一般常用react-redux來進行操作。react-redux提供的結(jié)構(gòu)可以讓我們不需要自己手動去寫dispatch，subscribe這些函數(shù)，它在內(nèi)部通過自身的結(jié)構(gòu)幫我們完成了這些操作。
而Dva，（終于說到了Dva?。?，它已經(jīng)封裝好了react-router，react-redux，redux-saga等中間件，并給出了清晰地工程目錄結(jié)構(gòu)。因而在了解react基礎知識后，用Dva來構(gòu)建工程更加快捷簡便。
那么，下一篇，我們就來真正用Dva創(chuàng)建一個工程并進行一些簡單操作~
請戳React爬坑之路三：Dva

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 做React需要會什么？ react的功能其實很單一，主要負責渲染的功能，現(xiàn)有的框架，比如angular是一個大而...
    蒼都閱讀 14,967評論 1贊 139
  • 技術(shù)棧： react + redux + webpack + react-router + ES6/7/8 + i...
    黃昏少年閱讀 3,133評論 0贊 19
  • 004 同學見面 從派出所出去，天還在下雨，漆黑的長街空無一人。慕容白害怕被再次抓進派出所，他冒雨去了...
    不可芳物閱讀 257評論 0贊 0
  • 從現(xiàn)在起，我開始謹慎地選擇我的生活，我不再輕易讓自己迷失在各種誘惑里。我心中已經(jīng)聽到來自遠方的呼喚，再不需要回過頭...
    菠菜黃閱讀 557評論 0贊 0
  • 姑姑: 其實我聽到了你確診癌癥的消息，內(nèi)心里生出最多的還是三個字“不可能”，為什么會是你，怎么會是你？ 你看起來很...
    殘陽物語閱讀 413評論 10贊 12

友情鏈接更多精彩內(nèi)容