React实战之React+Redux实现一个天气预报小项目
引言
经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目。源码地址:github.com/Beichenlove…
“我自己是一名从事了8年web前端开发的老程序员(我的微信:webxxq),今年年初我花了一个月整理了一份最适合2020年自学的web前端全套培训教程(视频+笔记+素材+源码+项目实战),从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理,打包给每一位前端小伙伴(总共约85G),这里是前端学习者聚集地,欢迎初学和进阶中的小伙伴(所有前端教程关注我的微信公众号:web前端学习圈,关注后回复“2020”即可领取)。
技术栈
前端
- React: 用于构建界面的MVVM框架
- Redux: React的集中状态管理,方便快捷实现组件间通信
- Redux-thunk: 常用的 redux 异步 action 中间件,用来处理接口请求等异步操作
- styled-components: 以组件化的思想编写CSS样式
- React-Redux:组件从Redux中读取数据,并向store分发actions以更新数据
- antd:基于React的UI库
- immutable:一种持久化数据结构,防止state对象被错误赋值
数据获取
- axios: 实现数据接口请求(用本地json文件模拟数据)
项目预览
页面初始化
选择热门城市
搜索其它城市
实现功能
获取本地实时地位
初次打开页面,根据所在城市进行天气展示,需要我们进行一个实时地位的获取,这里我使用了高德地图Web JS API。首先我们在public文件夹下的index.html引入在页面添加 JS API 的入口脚本标签;
// key值需在官网上申请
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值">
</script> 复制代码
我们使用官方提供的接口实现实时定位,因为需要首次渲染就展示天气信息,所以使用componenDidMount生命周期函数进行该请求:
componentDidMount()
{ // 防止作用域被修改 let _self = this; if(_self.props.init){ //eslint-disable-next-line AMap.plugin('AMap.CitySearch', function () { //eslint-disable-next-line var citySearch = new AMap.CitySearch() citySearch.getLocalCity(function (status, result) { if (status === 'complete' && result.info === 'OK') { // 查询成功,result即为当前所在城市信息 _self.props.getCity(result.city) _self.initWeather(_self.props.city) _self.props.getInit() } }) }) } else{ _self.initWeather(_self.props.city) }
}复制代码
这里需要做一个判断,如果从其它页面更改了城市选择,回到此页面会重新进行一个加载因而修改掉更改后的城市,因此我们用一个标识符来判断是不是首次加载。
另外我们注意有个坑,React会提示找不到 AMap
实例问题。这里使用注释
//eslint-disable-next-line
写在每个出现AMap类的前面一行,其eslint忽略此行代码从而不报错
获取城市天气信息
和获取定位信息类似,我仍然使用的高德地图提供的API,这里我附上官网,lbs.amap.com/api/javascr…
echarts数据可视化
为了显示温度变化趋势,我使用了echarts的折线图进行一个数据的可视化
实现代码
initEchart(array)
{ let domChart = this.dom; //eslint-disable-next-line var myChart = echarts.init(domChart); let option = null; option = { xAxis: { show: false, type: "category", axisLine: { lineStyle: { color: "#fff" } }, grid:{bottom: "20"}
}, yAxis: { show: false }, series: [ { data: array, type: "line" } ] } myChart.setOption(option, true);
}
复制代码
使用react-redux操作Redux
react-redux是react官方用来绑定Redux,将Provider放在最上层,从而实现store可以被下面组件接收
<Provider store={store}> <Router> <div> <Route exact path='/' component={MainPage}></Route> <Route exact path='/search' component={SearchCity}></Route> </div> </Router>
</Provider>复制代码
组件中我们使用connect()来获取store里的state或者dispatch action,利用其特性可以简单方便地实现城市的更改,历史搜索以及判断标识符等数据的更改和获取。
中间件thunk的使用
redux默认的设定是dispatch只能接受一个对象参数,函数和promise都是不允许的,thunk中间件则能解决这个问题,redux-thunk 统一了异步和同步 action 的调用方式,把异步过程放在 action 级别解决,而component 没有影响,这里我配合react-redux实现redux数据的一个更新操作。
二级页面城市搜索
我在二级页面实现一个搜索城市,查询城市天气的功能,这里我使用本地json文件,并用axios实现请求,
axios.get('/city/citys.json').then((res) =>
{ var tem = [] tem = res.data.citys.filter((item) => item.citysName.includes(value)) if(tem = []){ unfound = 'Not Found' } callback(tem.slice(0, 10)) loading = false
})复制代码
我使用一个filter方法来进行条件筛选,返回含有输入值的数据,若为空,则返回一个提示。搜索框我采用了antd官方组件,它已经给我们封装好了
<Select showSearch value={this.state.value} placeholder='请输入城市名,快速查询天气信息' defaultActiveFirstOption='flase' showArrow='true' filterOption={false} onSearch={this.handleSearch} onChange={this.handleChange} onBlur={this.handleBlur} notFoundContent={null} style={{ width: '75%' }} bordered='false' loading={loading} notFoundContent={unfound} > {this.state.data.map(d => <Option key={d.id}>{d.citysName}</Option>);}
</Select>复制代码
我用该组件文本框值变化时的回调函数handleSearch方法实现接口请求,筛选符合搜索条件的内容进行展示。并采用选中options(展示栏)的回调函数handleChange进行redux内state城市的一个更改,同时跳转到首页,代码:
handleSearch = value => { if (value) { loading = true fetch(value, data => this.setState({ data })); } else { this.setState({ data: [] }); }
};
handleBlur = () => unfound = null;
handleChange = value => { this.state.data.map((item) => { if (item.id == value) { let city = item.citysName.split(',')[0] this.props.changeCity(city) this.props.history.push('/') this.setState({ data: [] }); }
})
};复制代码
结语
虽然这个项目只是一个简单的小项目,但是对于自己的技能提示还是有一定的帮助。在开发过程中也遇到了一些问题,俗话说解决问题的过程就是自己能力提升的过程,毕竟学习之路,道阻且长,行则将至。
更多的项目详情大家可以访问我的Github,也 欢迎大家留言交流
React实战之React+Redux实现一个天气预报小项目相关推荐
- react实战项目_React实战之React+Redux实现一个天气预报小项目
引言 经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
- 【CV实战】年轻人的第一个GAN项目应该是什么样的(Pytorch框架)?
欢迎大家来到咱们的深度学习CV项目实战专栏,GAN是当下非常热门的技术,本次我们给大家介绍如何来训练自己的第1个生成对抗网络项目. 作者&编辑 | 言有三 本项目结果展示 本文篇幅:4000字 ...
- react+react-router 4.0+redux 构建购物车实战项目
前言 前些日子抽空学习了下react,因为近期忙着找工作,没时间写博客,今天我们就来看看用react全家桶,构建一个项目把,可能我学的也不是特别好,但是经过各种查资料,总算是能够构建出一个像模像样的栗 ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- React实战开发-----一个有关兰州疫情分析的软件,本人负责前端开发,本博客记录整个开发的流程,供大家参考
目录 前言 react介绍(觉得这些官方介绍啰嗦的直接看个人总结) 一.React的起源和发展 二.React的出发点 三.Recat与传统MVC的关系 四.React高性能的体现:虚拟DOM 五.R ...
- react实战课程_在使用React一年后,我学到的最重要的课程
react实战课程 by Tomas Eglinskas 由Tomas Eglinskas 在使用React一年后,我学到的最重要的课程 (The most important lessons I'v ...
- 彻底征服 React.js + Flux + Redux【讲师辅导】-曾亮-专题视频课程
彻底征服 React.js + Flux + Redux[讲师辅导]-74574人已学习 课程介绍 [会员免费]链接 http://edu.csdn.net/lecturer/585 ...
- React实战精讲(React_TS/API)
英国诗人 萨松在诗歌 <与我,过去.现在以及未来>中写道:"In me the tiger sniffs the rose" 诗人余光中将其翻译为:"心有猛虎 ...
- Web学习(十)React实战-计算器
Web学习(十)React实战-计算器 1.创建项目 create-react-app calculator 然后安装bootstrap,redux,route npm i bootstrap npm ...
- 【React.js 06】Redux基础知识
Redux是一个专注于状态管理的库,和React是解耦的,用Angular和Vue都可以使用Redux.其具有一个单一状态,单向数据流的特性. Redux概念 redux有一个store,记录所有的s ...
最新文章
- Idea用maven给springboot打jar包
- Copilot 真会砸了程序员的饭碗?
- 在Ring3上实现文件碎甲(解锁)功能
- 骚操作!阿里云直接买www.huaweicloud.com的关键词来抢生意?
- Go 语言基础(三) 之 函数
- rman report 命令
- 计算机科学与技术学术报告,Dennis K. Peters学术报告
- Python学习之类和实例
- 【MySQL】Java对SQL时间类型的操作(获得当前、昨天、前年。。时间)
- 【转】.NET平台开发Mongo基础知识
- 秒后面的单位是什么_为什么兰州马拉松很难跑出好成绩?
- 《深入理解java虚拟机》第1章 走近Java
- 基于Springboot实现销售团队管理系统
- C语言小项目----图书馆管理系统
- CISP 考试教材《第 2 章 知识域:网络安全监管》知识整理
- 串灯控制盒去掉怎么接_彩灯控制器原理图大全
- Git diffmerge 工具的配置及问题解决
- TCP/IP常见英文缩写
- python3爬虫实战-requests+beautifulsoup-爬取下载顶点网站的小说
- 工程学导论的学习感悟
热门文章
- Confluence 6 协同编辑问题解决
- 离线数仓03-数仓分层业务逻辑
- 2021软件测试技能大赛,2021软件测试国赛获奖感言
- coff2omf matlab,OMF和COFF格式有什么区别?
- 用户画像第四章(企业级360°用户画像_标签开发_挖掘标签_ 客户价值模型-RFM)
- 帝国cms添加关注公众号登录
- excel小技巧1:修改的日期格式为什么要双击一下单元格才能变
- mac 建 android 签名,mac android app 签名工具
- html页面获取扫码枪参数,js获取扫码枪输入数据的方法
- 科研人员论文投稿邮箱选择的问题