Router入门0x205: react-route + redux + react 集成
0x000 概述
这一章终于大集成了
0x001 集成react
源码
import React from 'react' import ReactDom from 'react-dom'class App extends React.Component {render() {return (<div>react</div>)} }ReactDom.render(<App/>,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 (<p>article</p>)} }let MyArticle = withRouter(Article)class App extends React.Component {render() {return (<div><Route component={MyArticle}></Route></div>)} }let MyApp = withRouter(App)ReactDom.render(<BrowserRouter><MyApp/></BrowserRouter>,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 (<p>{this.props.counter}</p>)} }let MyArticle = withRouter(connect((state) => {return {counter: state.counter} })(Article))class App extends React.Component {render() {return (<div><Route component={MyArticle}></Route><button onClick={() => this.props.increment()}>+</button><button onClick={() => this.props.decrement()}>-</button></div>)} }let MyApp = withRouter(connect(() => ({}), (dispatch) => {return {increment: () => dispatch(increment()),decrement: () => dispatch(decrement())} })(App))ReactDom.render(<Provider store={store}><BrowserRouter><MyApp/></BrowserRouter></Provider>,document.getElementById('app') )
- 效果
说明
- 主要用到
redux
、react-redux
库 reducer
、action
、actionCreators
都是redux
用的Provider
接管BrowserRouter
,并注入store
connect
连接组件和store
,为组件注入reducer
- 主要用到
0x005 总结
每一步都搞懂,下一步才能更明确。
0x006 资源
- 源码
Router入门0x205: react-route + redux + react 集成相关推荐
- React Router入门指南
by Nader Dabit 纳德·达比特(Nader Dabit) React Router入门指南 (Beginner's Guide to React Router) Or what I wis ...
- 使用React,Redux和Router进行真正的集成测试
by Marcelo Lotif 通过马塞洛·洛蒂夫(Marcelo Lotif) 使用React,Redux和Router进行真正的集成测试 (Real integration tests with ...
- React 全家桶(react脚手架 redux react-redux react-router-dom ui库 reactHook)含 自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物 为何学习 React React 初体验 来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
- 一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.
DvaJS: React and redux based, lightweight and elm-style framework. https://dvajs.com/ 实例项目源码:https:/ ...
- 带有Node,React和Redux 1的Retrogames库:服务器API和React前端
2017/03/29 Update: Fixed the versions of react-router and react-hot-loader. 2017/03/20 Update: Webpa ...
- 为什么我在2018年从Angular切换到React和Redux
http://blog.workshape.io 提示:不是因为炒作 我在相当长的一段时间内一直与Angular建立这种爱恨交加的关系. 这很有趣,因为当我陷入困境时,我正在学习并且正在制作一个简单的 ...
- angular和react_为什么我在2018年从Angular切换到React和Redux
angular和react http://blog.workshape.io 提示:不是因为炒作 我与Angular建立了这种爱恨交加的关系已有相当一段时间了. 这很有趣,因为当我陷入困境时,我正在学 ...
- 如何使用React和Redux前端创建Rails项目
by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用React和Redux前端(加上Typescript!)创建Rails项目 (How to create a Rails ...
- Rekit Studio简介:用于React和Redux开发的真实IDE
by Nate Wang 内特·王 Rekit Studio简介:用于React和Redux开发的真实IDE (Introducing Rekit Studio: a real IDE for Rea ...
最新文章
- android 拖动数字选择,拖放android 3.x导致illegalStateException之后的小数字拖动
- 安装memcached服务和PECL关于memcache的两个PHP扩展
- quartz 2.2.1 jdbc 连接池参数配置
- SAP CRM Fiori应用My Task的前台优化
- 给定一个n节点的二叉树,写出一个O(n)时间递归过程,将该树每个节点关键字输出(算法导论第十章10.4-2)
- Google+ 团队的 Android UI 测试
- EMNLP2020文档级关系抽取模型GAIN 论文Double Graph Based Reasoning for Document-level Relation Extraction
- LINUX 使用ssh客户端
- 埃航坠机事件调查结果公布时间!
- 金启孮:普通话其实是满州人的蹩脚汉语
- css div里引用em字体会变斜体_DIV+CSS怎么样改字体样式
- 点下确认的那一刻,我的大脑在发生些什么?
- 阿里云数据库RDS MySQL Serverless测评
- C语言实现BMP图片的放大缩小
- 云服务器价格比较,用哪家的比较划算?
- 股豆网:欧洲5G套餐轮番公布 流量无限用
- BZOJ 1812 IOI 2005 riv
- 数学柏拉图多面体---定积分(二)
- 深入浅出单点登录---4、基于OAuth实现的统一认证
- springboot+vue音乐网站实战项目