React實戰之React+Redux實現一個天氣預報小項目

時間 2020-03-31

標籤 react 實戰 react+redux redux 實現一個天氣預報小項目欄目 React 简体版

原文原文鏈接

引言

通過一段時間的React學習，React和Vue的開發確實有很大的不一樣，可是都是MVVM框架，所以上手沒有很大的難度，此次用React+Redux開發一個天氣預報小項目。源碼地址：github.com/Beichenlove…javascript

技術棧

前端html

React: 用於構建界面的MVVM框架
Redux: React的集中狀態管理，方便快捷實現組件間通訊
Redux-thunk: 經常使用的 redux 異步 action 中間件，用來處理接口請求等異步操做
styled-components: 以組件化的思想編寫CSS樣式
React-Redux:組件從Redux中讀取數據，並向store分發actions以更新數據
antd：基於React的UI庫
immutable:一種持久化數據結構,防止state對象被錯誤賦值

數據獲取前端

axios: 實現數據接口請求(用本地json文件模擬數據）

項目預覽

頁面初始化java

選擇熱門城市react

搜索其它城市ios

實現功能

獲取本地實時地位

初次打開頁面，根據所在城市進行天氣展現，須要咱們進行一個實時地位的獲取，這裏我使用了高德地圖Web JS API。首先咱們在public文件夾下的index.html引入在頁面添加 JS API 的入口腳本標籤；git

// key值需在官網上申請
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申請的key值">
</script> 複製代碼

咱們使用官方提供的接口實現實時定位，由於須要首次渲染就展現天氣信息，因此使用componenDidMount生命週期函數進行該請求：github

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)    
   }
}複製代碼

這裏須要作一個判斷，若是從其它頁面更改了城市選擇，回到此頁面會從新進行一個加載於是修改掉更改後的城市，所以咱們用一個標識符來判斷是否是首次加載。web

另外咱們注意有個坑，React會提示找不到 AMap 實例問題。這裏使用註釋json

//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: [] });      
    }    
})  
};複製代碼