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

yiliang 发布于2019-08-23 12:16 / 1875人阅读

摘要：概述这一章终于大集成了集成源码效果说明集成主要是用到库集成源码效果说明主要用到库，是针对库在环境下的封装组件，注入等属性接管跟组件指定路由和组件的对应关系集成源码引入相关的包和链接组件效果说明主要用到库都是用的接

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环境下的封装

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98216.html

从项目中由浅入深的学习react (2)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用前言从和原生两个项目来介绍的使用搞懂这两个项目上手撸代码篇效果图项目欢迎技术栈路由版本状态管理组件字体适配方案适配技能点分析技能点对应的种定义组件方法函数式定义的无状态组 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章从项目中由浅入深的学习vue,微信小程序...

leap_frog 2019-08-23 16:42 评论0 收藏0
React 入门实践

摘要：更多相关介绍请看这特点仅仅只是虚拟最大限度减少与的交互类似于使用操作单向数据流很大程度减少了重复代码的使用组件化可组合一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。在使用后，就变得很容易维护，而且数据流非常清晰，容易解决遇到的。欢迎移步我的博客阅读：《React 入门实践》在写这篇文章之前，我已经接触 React 有大半年了。在初步学习 React 之后就正式应用到项...

shenhualong 2019-08-19 17:47 评论0 收藏0
实例讲解react+react-router+redux

摘要：而函数式编程就不一样了，这是模仿我们人类的思维方式发明出来的。数据流在中，数据的流动是单向的，即从父节点传递到子节点。数据流严格的单向数据流是架构的设计核心。前言总括：本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。代码地址：Re...

RiverLi 2019-08-21 11:20 评论0 收藏0
React生态，dva源码阅读

摘要：下面会从浅到深，淡淡在阅读源码过程中自己的理解。分拆子页面后，每一个子页面对应一个文件。总结上面就是最早版本的源码，很简洁的使用了等其目的也很简单简化相关生态的繁琐逻辑参考源码地址 dva的思想还是很不错的，大大提升了开发效率，dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中...

bergwhite 2019-08-30 15:55 评论0 收藏0
React生态，dva源码阅读

摘要：下面会从浅到深，淡淡在阅读源码过程中自己的理解。分拆子页面后，每一个子页面对应一个文件。总结上面就是最早版本的源码，很简洁的使用了等其目的也很简单简化相关生态的繁琐逻辑参考源码地址 dva的思想还是很不错的，大大提升了开发效率，dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中...

txgcwm 2019-08-23 14:57 评论0 收藏0