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文件模拟数据)


项目预览

页面初始化

                                        

       

选择热门城市

                                   


搜索其它城市

                                   


实现功能

获取本地实时地位

初次打开页面,根据所在城市进行天气展示,需要我们进行一个实时地位的获取,这里我使用了高德地图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: [] });    }})};

结语

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


最近面试BAT,整理一份面试资料前端面试BAT通关手册,覆盖了前端技术、CSS、JavaScript、框架、 数据库、数据结构等等。
获取方式:关注公众号并回复 前端 领取,更多内容陆续奉上。


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

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

原创文章,作者:栈长,如若转载,请注明出处:https://www.cxyquan.com/13492.html

发表评论

登录后才能评论

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息