前端筆記之React（七）redux-saga&Dva&路由

時間 2019-11-10

標籤前端筆記 react redux saga&dva saga dva 路由欄目 React 简体版

原文原文鏈接

1、redux-saga解決異步

redux-thunk 和 redux-sagahtml

使用redux它們是必選的，二選一，它們兩個均可以很好的實現一些複雜狀況下redux，本質都是爲了解決異步action而生，使redux保持完整性，不至於太過混亂。redux-saga 是一個用於管理Redux 應用異步操做的中間件。 redux-saga 經過建立 Sagas將全部的異步操做邏輯收集在一個地方集中處理，能夠用來代替 redux-thunk 中間件。並且提供了takeLatest/takeEvery能夠對事件的僅關注最近事件、關注每一次、事件限頻；reudx-saga更方便測試，等等太多了。vue

npm install --save redux-saga

https://redux-saga.js.org/react

https://redux-saga-in-chinese.js.org/git

新手教學：github

https://redux-saga-in-chinese.js.org/docs/introduction/BeginnerTutorial.htmlvuex

saga就是攔截action，進行異步請求，轉發action，再去reducer進行處理請求express

在app根目錄建立sagas.js文件，和main.js同級npm

// ES6的新特性，叫作Generator，產生器
// 是一種能夠被調用的時候加next()打斷點的特殊函數
export function* helloSaga() {
    console.log('Hello Sagas!');
}

示例代碼

main.js：json

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import createSagaMiddleware from 'redux-saga';

import App from "./containers/App.js";
import reducer from "./reducers";
//引入sages文件
import { helloSaga } from './sagas.js'

//建立saga中間件
const sagaMiddleware = createSagaMiddleware(helloSaga)
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
//運行
sagaMiddleware.run(helloSaga)

ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>,
    document.getElementById("app")
);

components/counter/index.js寫一個按鈕：redux

<button onClick={()=>{this.props.counterActions.addServer()}}>加服務器數據</button>

actions/counterActions.js文件中發出一個action叫ADDSERVER，但異步還沒發出：

import { ADD, MINUS, ADDSERVER } from "../constants/COUNTER.js";
export const add = () => ({"type" : ADD});
export const minus = () => ({"type" : MINUS});
export const addServer = () => ({"type" : ADDSERVER});

constants/COUNTER.js

export const ADDSERVER = "ADDSERVER"

改變saga.js：saga開始工做，它要開始劫持監聽ADDSERVER

import { delay } from 'redux-saga'
import { put, takeEvery , all} from 'redux-saga/effects'

//worker Saga將執行異步的ADDSERVER任務
function* addServerAsync(){
    alert("我是工做saga")
}

//watcher Saga
建立了一個 Saga watchAddServer。用了redux-saga提供的輔助函數takeEvery，
用於監聽全部的 ADDSERVER action，並在 action 被匹配時執行addServerAsync任務。
function* watchAddServer(){
//takeEvery表示「使用每個」，當有action的type是ADDSERVER時，就執addServerAsync函數
    yield takeEvery('ADDSERVER', addServerAsync);
}

//向外暴露一個默認的rootSaga，有一個設置的監聽隊列
export default function* rootSaga(){
    //建立一系列的監聽隊列
    yield all([watchAddServer()])
}

改變main.js:

import React from "react";
import ReactDOM from "react-dom";
import {createStore , applyMiddleware} from "redux";
import {Provider} from "react-redux";
import logger from "redux-logger";
import createSagaMiddleware from 'redux-saga';

import reducer from "./reducers/index.js";
import App from "./containers/App.js";
//引入sagas文件
import rootSaga from './sagas.js';
//建立saga中間件
const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(logger, sagaMiddleware));
sagaMiddleware.run(rootSaga);

ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>
    ,
    document.getElementById("app")
);

sagas.js 請求服務器的具體語句，寫在worker saga中。

function* addServerAsync() {
    //拉取數據
   const {result} = yield fetch("/api").then(data=>data.json());
    //put就是發出（轉發）action，action的type爲了避諱，加_SYNC後綴
    yield put({ "type": "ADDSERVER_SYNC" , result});
}

reducers/counter.js

export default (state = {"v" : 0} , action) => {
    if(action.type == "ADD"){
        ...
    }else if(action.type == "MINUS"){
        ...
    }else if(action.type == "ADDSERVER_SYNC"){
        return {
            "v": state.v + action.result } } 
    return state;
}

saga就是攔截action，進行異步請求，轉發action，再去reducer進行處理請求

刪除actions、constants文件夾，而後給reducers/counter.js的type都加上引號！

改counter/index.js，不用bindActionCreators了，直接發出action。

import React from 'react';
import {connect} from "react-redux";
class Counter extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h1>Counter : {this.props.v}</h1>
                <button onClick={()=>{this.props.add()}}>增長</button>
                <button onClick={()=>{this.props.minus()}}>減小</button>
                 <button onClick={()=>{this.props.addServer()}}>加服務器數據</button>
            </div>
        );
    }
}
export default connect(
    ({counter}) => ({
        v : counter.v
    }),
    (dispatch) => ({
        add(){
            dispatch({"type" : "ADD"});
        },
        minus() {
            dispatch({"type": "MINUS" });
        },
        addServer() {
            dispatch({"type": "ADDSERVER" }); } })
)(Counter);

加入pie圖表組件

components/pie/index.js組件，記得在App.js引入組件

import React from 'react';
import {connect} from "react-redux";

class Pie extends React.Component {
    constructor(props) {
        super(props);
    //請求數據
 props.loadServerData();
    }

    //組件已經上樹
    componentDidMount(){
        //echarts是引入的百度的包提供的全局變量
        this.pic = echarts.init(this.refs.pic);
    }
    componentWillUpdate(nextProps){
        var option = {
            ...
        };
        //設置option組件就能顯示了！
        this.pic.setOption(option);
    }

    render() {
        return (
              <div>
                <h1>我是pie組件！</h1>
                <div ref="pic" style={{"width":"300px" ,"height":"300px"}}></div>
                <button onClick={()=>{this.props.toupiao('a')}}>清晰</button>
                <button onClick={()=>{this.props.toupiao('b')}}>通常</button>
                <button onClick={()=>{this.props.toupiao('c')}}>懵逼</button>
              </div>
        );
    }
}

export default connect(
    ({pie})=>({
        result: pie.result
    }),
    (dispatch)=>({
        loadServerData(){
           dispatch({ "type": "LOADSERVERDATA"})
        },
        toupiao(zimu){
            dispatch({ "type": "TOUPIAO" , zimu}) } })
)(Pie);

reducers/pie.js，在reducers/index.js中引入

export default (state = {"result" : []} , action) => {
    if (action.type == "LOADSERVERDATA_SYNC"){
        return {
            ...state ,
            result : action.result
        }
    }
    return state;
}

sagas.js

import { delay } from 'redux-saga';
import { put, takeEvery , all} from 'redux-saga/effects';

//worker Saga
function* addServer() {
    //拉取數據，轉發action
    const {result} = yield fetch("/api").then(data=>data.json());
    yield put({ "type": "ADDSERVER_SYNC" , result});
}

function* loadServerData() {
    const {result} = yield fetch("/api2").then(data=>data.json());
    yield put({ "type": "LOADSERVERDATA_SYNC", result });
} function* toupiao(action) {
    const {result} = yield fetch("/toupiao/" + action.zimu).then(data=>data.json());
    yield put({ "type": "LOADSERVERDATA_SYNC", result });
} // watcher Saga
function* watchAddServer() {
    yield takeEvery('ADDSERVER', addServer);
}

function* watchLoadServerData() {
   yield takeEvery('LOADSERVERDATA', loadServerData);
} function* watchToupiao() {
    yield takeEvery('TOUPIAO', toupiao);
} //向外暴露一個默認的rootSaga，有一個all設置的監聽隊列
export default function* rootSaga(){
    //建立一系列的監聽隊列
 yield all([watchAddServer(), watchLoadServerData() , watchToupiao()])
}

2、Dva簡介和配置

2.1 Dva簡介

文檔：https://github.com/dvajs/dva/blob/master/README_zh-CN.md

React繁文縟節不少，爲何？

由於React將注意力放到了組件開發上，能夠用class App extends React.Component類，它就是一個組件了，能夠被任意插拔，<App></App>。

可被預測狀態容器Redux感受在React「以外」，不「渾然一體」。

好比要配置Redux：

……
var {createStore} from "redux";
……
const store = createStore(reducer);
……
<Provider store={store}>
    <App></App>
</Provider>
組件中：
connect()(App);

示例代碼

若是要使用異步，更感受是在React「以外」，不「渾然一體」。

……
var {createStore} from "redux";
……
const store = createStore(reducer , applyMiddleware(saga));
run(rootSaga);
……
<Provider store={store}>
    <App></App>
</Provider>

示例代碼

這是由於React將注意力放到了組件開發上。

Vue框架要比React好不少，渾然一體方面簡直無敵。

Vue天生帶有Vuex，天生就能夠有可被預測狀態容器，有異步解決的方案。

阿里巴巴的雲謙，發明了dvajs這個庫，「集大成」者，本質的目的就是讓程序「渾然一體」，一方面是方便起步，更大的發明利於團隊組件開發，不用頻繁在組件文件actions、saga、reducers文件之間進行切換了。

2.2 Hello World

npm install --save dva

dva中集成了redux、react-redux、redux-saga、react-router-redux，因此咱們的項目裝dva以前，要去掉這4個依賴。

注意：如今的package.js文件沒有以上這些依賴：

{
  "name": "react_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
  "dependencies": {
    "dva": "^2.4.0",
    "express": "^4.16.3",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "redux-logger": "^3.0.6"
  }
}

後端app.js提供靜態化路由：

var express = require("express");
var app = express();
app.use(express.static("www"))

app.get("/api",(req,res)=>{
    res.json({"result":10})
})

app.listen(3000);

示例代碼

main.js

import dva from 'dva';
//引入路由
import router from './router.js';

//建立app應用
const app = dva();

//註冊視圖，建立路由
app.router(router)

//啓動應用 上樹運行
app.start('#app');

示例代碼

router.js是路由，單頁面應用的hash路由，router.js文件暫時不寫任何路由功能，只返回一個標籤。

import React from 'react';
export default ()=>{
    return <h1>我是dva</h1>
}

2.3使用組件

組件沒有任何的簡化，仍是原來的寫法：

components/App.js

import React from 'react'
export default class App extends React.Component {
    constructor(){
        super()
    }
    render() {
        return <div>
            <h1>我是App組件</h1>
        </div>
    }
}

示例代碼

在router.js（路由文件）引入App組件，表示一上來就掛載App組件：

import React from 'react';
import App from './components/App';
export default ()=>{
    return <App></App>
}

示例代碼

2.4使用redux，建立model，組件要問天要數據

這裏很是大的改變，照着Vuex改的

注意：不是建立reducers文件夾，而是建立models文件夾，建立counter.js

export default {
    "namespace":"counter", //命名空間
    "state":{
        a : 100
    }
}

示例代碼

內部，dva會自動將counter做爲一個reducer的名字，進行combineReducers

main.js

import React from 'react';
import dva from 'dva';
// 引入路由
import router from './router.js';
import counter from './model/counter.js';

//建立app
const app = dva();

//建立路由
app.router(router)
//建立並使用全局數據
app.model(counter)

//上樹運行
app.start('#app');

組件沒有任何變化，只不過connect要從dva中引包。

2.5改變天上數據

dispatch()沒有改變

model文件counter.js建立一個屬性叫reducers，裏面放一個add函數，依然是純函數，不能改變state，只能返回新的state。

export default {
    "namespace" : "counter",
    "state" : {
        "a" : 100
    },
    "reducers" : {
        add(state,action){
            return {
                "a" : state.a + action.n } } }
}

2.6異步

改變model中counter.js文件，剛纔已經有了reducers函數，那裏是寫同步的函數。

如今要建立一個effects函數，這裏寫異步的函數，很像vuex！！

export default {
    "namespace" : "counter" , 
    "state" : {
        "a" : 100
    },
    "reducers" : {
        //這裏寫同步函數
        add(state , action){
            return { "a": state.a + action.n}
        }
    },
    "effects" : {
        //這裏寫異步函數
        *addServer(action , {put}){
            const {result} = yield fetch("/api").then(data=>data.json());
            //異步終點必定是某個同步函數，因此put從新觸發某個reducers中的同步函數
//帶着載荷參數，去改變state的數據
            yield put({"type" : "add" , "n" : result})
        }
    }
}

組件的按鈕沒有變化：

2.7使用logger插件

import React from 'react';
import dva from 'dva';
import logger from 'redux-logger';

//引入路由
import router from './router.js';
import counter from './models/counter.js';

// 建立app
const app = dva({ onAction: logger});
//建立路由
app.router(router);
//建立並使用模型
app.model(counter);
//上樹運行
app.start("#app");

3、React路由

3.1概述

每一個公司用的路由都不同，這裏不同是很不同。

dva中依賴react-router-redux，沒有改變任何語法

可是react-router-redux出了5代版本，它的2、4、5都特別不同。

參考文章：

2代：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu

5代：https://blog.csdn.net/isaisai/article/details/78086913

還能夠不用官方這個路由，用UI-Router

更能夠不用單頁面路由，用服務器後端的路由

咱們介紹的是單頁面的，dva2.3中的react-router-redux 5代的路由寫法。

3.2基本使用

react-router-redux是單層級路由，路由的描述，沒有任何嵌套

直接路由到最內層組件。

main.js

import React from 'react';
import dva from 'dva';
import logger from 'redux-logger';
// 引入路由
import router from './router.js';

//建立app
const app = dva({ onAction: logger});

//建立路由
app.router(router)
//建立並使用數據模型
app.model(counter)
//上樹運行
app.start('#app');

app/router.js路由文件：

import React from 'react';
import { Router, Switch, Route } from 'dva/router';

import Index from "./components/index.js";
import CarList from "./components/carlist/index.js";
import UserList from "./components/userlist/index.js";
 
export default ({ history, app }) => {
    return  <Router history={history}>
        <Switch>
        　　 <Route exact path="/" component={Index} />
            <Route exact path="/carlist" component={CarList} />
            <Route exact path="/userlist" component={UserList} />
        </Switch>
    </Router>
}

這個路由是一個被動的寫法：子組件聲明我被誰嵌套，而不是父組件聲明我嵌套誰。

最內層組件，好比CarList組件，寫法：

import React from 'react';
import {connect} from "dva";
import App from "../../containers/App.js";
export default class CarList extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
           <App menu="汽車">
                <div>
                    <h1>我是Carlist組件</h1>
                </div>
           </App>
        );
    }
}

App.js

import React from 'react';
import { connect } from 'dva';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { push } from 'react-router-redux';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;


class App extends React.Component {
    constructor() {
        super()
    }
    render() {
        return <div>
            <Layout>
                <Header className="header">
                    <div className="logo" />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={[this.props.menu]}
                        style={{ lineHeight: '64px' }}
                        onClick={(e) => { this.props.dispatch(push(e.item.props.url))}}
                    >
                    
                        <Menu.Item key="首頁" url="/">首頁</Menu.Item>
                        <Menu.Item key="汽車" url="/carlist">汽車</Menu.Item>
                        <Menu.Item key="用戶" url="/userlist">用戶</Menu.Item>
                    </Menu>
                </Header>
                <Layout>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>
                        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>,
        </div>
    }
}

export default connect()(App);

路由跳轉：

onClick={(e)=>{this.props.dispatch(push(e.item.props.url))}}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。