React实战之React+Redux实现一个天气预报小项目

Stella981 等级 119 0 0
标签: reactreduxhttps

React实战之React+Redux实现一个天气预报小项目 引言

经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目。源码地址:https://github.com/BeichenloveNancy/React-study/tree/master/weather


技术栈

前端

  • React: 用于构建界面的MVVM框架

  • Redux: React的集中状态管理,方便快捷实现组件间通信

  • Redux-thunk: 常用的 redux 异步 action 中间件,用来处理接口请求等异步操作

  • styled-components: 以组件化的思想编写CSS样式

  • React-Redux:组件从Redux中读取数据,并向store分发actions以更新数据

  • antd:基于React的UI库

  • immutable:一种持久化数据结构,防止state对象被错误赋值

数据获取

  • axios: 实现数据接口请求(用本地json文件模拟数据)

项目预览

页面初始化

                                   React实战之React+Redux实现一个天气预报小项目      

选择热门城市

                                   React实战之React+Redux实现一个天气预报小项目

搜索其它城市

                                   React实战之React+Redux实现一个天气预报小项目

实现功能

获取本地实时地位

初次打开页面,根据所在城市进行天气展示,需要我们进行一个实时地位的获取,这里我使用了高德地图Web JS API。首先我们在public文件夹下的index.html引入在页面添加 JS API 的入口脚本标签;

// key值需在官网上申请

我们使用官方提供的接口实现实时定位,因为需要首次渲染就展示天气信息,所以使用componenDidMount生命周期函数进行该请求:

componentDidMount()

这里需要做一个判断,如果从其它页面更改了城市选择,回到此页面会重新进行一个加载因而修改掉更改后的城市,因此我们用一个标识符来判断是不是首次加载。

另外我们注意有个坑,React会提示找不到 AMap 实例问题。这里使用注释

//eslint-disable-next-line

写在每个出现AMap类的前面一行,其eslint忽略此行代码从而不报错

获取城市天气信息

和获取定位信息类似,我仍然使用的高德地图提供的API,这里我附上官网,lbs.amap.com/api/javascr…

echarts数据可视化

为了显示温度变化趋势,我使用了echarts的折线图进行一个数据的可视化

实现代码

initEchart(array)

使用react-redux操作Redux

react-redux是react官方用来绑定Redux,将Provider放在最上层,从而实现store可以被下面组件接收

<Provider store={store}>

组件中我们使用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) =>

我使用一个filter方法来进行条件筛选,返回含有输入值的数据,若为空,则返回一个提示。搜索框我采用了antd官方组件,它已经给我们封装好了

 <Select

我用该组件文本框值变化时的回调函数handleSearch方法实现接口请求,筛选符合搜索条件的内容进行展示。并采用选中options(展示栏)的回调函数handleChange进行redux内state城市的一个更改,同时跳转到首页,代码:

handleSearch = value => {

结语

虽然这个项目只是一个简单的小项目,但是对于自己的技能提示还是有一定的帮助。在开发过程中也遇到了一些问题,俗话说解决问题的过程就是自己能力提升的过程,毕竟学习之路,道阻且长,行则将至。

源自:https://juejin.im/post/5e7f0e84f265da79a323809a

声明:文章著作权归作者所有,如有侵权,请联系小编删除。

感谢 · 转发欢迎大家留言

React实战之React+Redux实现一个天气预报小项目

本文分享自微信公众号 - web前端学习圈(web-xxq)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

收藏
评论区

相关推荐

《彻底掌握redux》之开发一个任务管理平台(上)
前言 redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发,但是对于一个大型项目而言,往往考虑的更多的是代码结构和组件之间的通信,我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统,所以这种情况下使用redux是最佳
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
React Hooks究竟是什么呢?
**摘要:** React Hooks原理解析。 * 原文:[快速了解 React Hooks 原理](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000019966124) * 译者:前端小智 我们大部分 React 类
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React 小白初入门
推荐学习: * React 官方文档: [https://react.docschina.org/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Freact.docschina.org%2F) * React 菜鸟教程: [https://
React 系列教程2:编写兰顿蚂蚁演示程序
简介 -- 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西。因无意中看到[生命游戏](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fthepeted%2Fgame-of-life-redux)的 React 实现,所以希望通过兰顿蚂蚁的
React 设计思想
https://github.com/react-guide/react-basic React 设计思想 ========== > 译者序:本文是 React 核心开发者、有 React API 终结者之称的 Sebastian Markbåge 撰写,阐述了他设计 React 的初衷。阅读此文,你能站在更高的高度思考 React 的过去、现在和未来。
React实战之React+Redux实现一个天气预报小项目
![](https://oscimg.oschina.net/oscnet/355a9b3e0af9e3410d9cf918fdfe69b2379.jpg)**引言** ------------------------------------------------------------------------------------ 经过一段时间的Re
React技术栈实现XX点评电商App
> 项目地址:[https://github.com/Nealyang/React-Fullstack-Dianping-Demo](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNealyang%2FReact-Fullstack-Dianping-Demo)
React教程:4 个 useState Hook 示例
**摘要:** React示例教程。 * 原文:[快速了解 React Hooks 原理](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000019975655) * 译者:前端小智 到 React 16.8 目前为止,如
React知识杂烩(持续更新)
每隔半年不看官方文档,你就会不认识React了😁 * React组件生命周期 * 受控组件与非受控组件 * 多个输入的解决方法 * Props.children可以传递任何数据包括函数 * 布尔值、Null 和 Undefined 被忽略 * 使用 PropTypes 进行类型检查(直接参考官方文档) * react-redux
Redux入门实战——todo
1.前言 ==== 在之前的博客中,我写了一篇关于todo-list实现的博客,一步一步详细的记录了如何使用基础的React知识实现一个React单页面应用,通过该篇文章,能够对React入门开发有一个直观的认识和粗浅的理解。 近期,个人学习了一下Redux,又将该项目使用 React+Redux的方式进行了实现。本片内容记录以下实践的过程。通过本实例,
Redux异步解决方案之Redux
前段时间,我们写了一篇[Redux源码分析的文章](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fjuejin.im%2Fpost%2F6845166891682512909),也[分析了跟`React`连接的库`React-Redux`的源码实现](https://www.oschina
taro 知识点
* taro 的包: 包名 说明 @tarojs/redux Redux for Taro @tarojs/redux-h5 Forked react-redux for taro @tarojs/plugin-csso Taro压缩CSS文件 ### 内置环境变量 `process.env.TARO_ENV`用于判断当前编译类型,目