Router入門0x205: react-route + redux + react 集成

yiliang 發(fā)布于2019-08-23 12:16 / 1904人閱讀

摘要：概述這一章終于大集成了集成源碼效果說明集成主要是用到庫集成源碼效果說明主要用到庫，是針對庫在環(huán)境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對應關系集成源碼引入相關的包和鏈接組件效果說明主要用到庫都是用的接

0x000 概述

這一章終于大集成了

0x001 集成react

源碼

import React from "react"
import ReactDom from "react-dom"

class App extends React.Component {
    render() {
        return (react)
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

效果

說明：

集成react主要是用到react、react-router庫

0X002 集成react-router

源碼

import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Route, withRouter} from "react-router-dom"

class Article extends React.Component {
    render() {
        return (
            article
        )
    }
}

let MyArticle = withRouter(Article)

class App extends React.Component {
    render() {
        return (
            
        )
    }
}

let MyApp = withRouter(App)

ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

效果

說明

主要用到react-router-dom庫，是針對react-router庫在dom環(huán)境下的封裝

withRouter組件，注入match、location、history等屬性

BrowserRouter接管跟組件

Route指定路由和組件的對應關系

0x003 集成redux

源碼

引入redux相關的包

import {Provider, connect} from "react-redux"
import {createStore} from "redux"

reducer

const counter = (state = {counter: 0, num: 0}, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return {...state, ...{counter: ++state.counter}}
        case ACTION_DECREMENT:
            return {...state, ...{counter: --state.counter}}
        default:
            return state
    }
}

action和actionCreators

// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

鏈接組件

// store
const store = createStore(counter)

class Article extends React.Component {
    render() {
        return (
            {this.props.counter}
        )
    }
}

let MyArticle = withRouter(connect((state) => {
    return {
        counter: state.counter
    }
})(Article))

class App extends React.Component {
    render() {
        return (
            
                
                
                
            
        )
    }
}

let MyApp = withRouter(connect(() => ({}), (dispatch) => {
    return {
        increment: () => dispatch(increment()),
        decrement: () => dispatch(decrement())
    }
})(App))

ReactDom.render(
    
        
            
        
    ,

    document.getElementById("app")
)

效果

說明

主要用到redux、react-redux庫

reducer、action、actionCreators都是redux用的

Provider接管BrowserRouter，并注入store

connect連接組件和store，為組件注入reducer

0x005 總結

每一步都搞懂，下一步才能更明確。

0x006 資源

源碼

云服務器 GPU云服務器 react-router react-router4 react-router-redux react-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/98216.html

從項目中由淺入深的學習react (2)

摘要：序列文章從項目中由淺入深的學習微信小程序和快應用前言從和原生兩個項目來介紹的使用搞懂這兩個項目上手擼代碼篇效果圖項目歡迎技術棧路由版本狀態(tài)管理組件字體適配方案適配技能點分析技能點對應的種定義組件方法函數(shù)式定義的無狀態(tài)組 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章從項目中由淺入深的學習vue,微信小程序...

leap_frog 2019-08-23 16:42 評論0 收藏0
React 入門實踐

摘要：更多相關介紹請看這特點僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數(shù)據(jù)流很大程度減少了重復代碼的使用組件化可組合一個組件易于和其它組件一起使用，或者嵌套在另一個組件內部。在使用后，就變得很容易維護，而且數(shù)據(jù)流非常清晰，容易解決遇到的。歡迎移步我的博客閱讀：《React 入門實踐》在寫這篇文章之前，我已經接觸 React 有大半年了。在初步學習 React 之后就正式應用到項...

shenhualong 2019-08-19 17:47 評論0 收藏0
實例講解react+react-router+redux

摘要：而函數(shù)式編程就不一樣了，這是模仿我們人類的思維方式發(fā)明出來的。數(shù)據(jù)流在中，數(shù)據(jù)的流動是單向的，即從父節(jié)點傳遞到子節(jié)點。數(shù)據(jù)流嚴格的單向數(shù)據(jù)流是架構的設計核心。前言總括：本文采用react+redux+react-router+less+es6+webpack,以實現(xiàn)一個簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實現(xiàn)一個完整應用的過程。代碼地址：Re...

RiverLi 2019-08-21 11:20 評論0 收藏0
React生態(tài)，dva源碼閱讀

摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應一個文件?？偨Y上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關生態(tài)的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發(fā)效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態(tài)管理,以及Redux-saga中...

bergwhite 2019-08-30 15:55 評論0 收藏0
React生態(tài)，dva源碼閱讀

摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應一個文件?？偨Y上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關生態(tài)的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發(fā)效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態(tài)管理,以及Redux-saga中...

txgcwm 2019-08-23 14:57 評論0 收藏0