React+Redux в React Combat реализует небольшой проект прогноза погоды

React.js
React+Redux в React Combat реализует небольшой проект прогноза погоды

введение

После периода изучения React разработка React и Vue действительно сильно отличается, но обе они представляют собой интерфейсные фреймворки, основанные на представлениях, управляемых данными, поэтому начать работу не очень сложно.На этот раз я буду использовать React. +Redux для разработки небольшого проекта прогноза погоды. . Адрес источника:GitHub.com/B EI любит пыль…

стек технологий

внешний интерфейс

  • React:Интерфейсный фреймворк для создания интерфейсов

  • Redux:Централизованное управление состоянием React, удобная и быстрая связь между компонентами

  • **Redux-thunk:** часто используемое промежуточное ПО для асинхронных действий с избыточностью, используемое для обработки асинхронных операций, таких как запросы интерфейса.

  • styled-components:Пишите стили CSS с учетом компонентов

  • React-Redux: компонент считывает данные из Redux и отправляет действия в хранилище для обновления данных.

  • antd: библиотека пользовательского интерфейса на основе React.

  • immutable: постоянная структура данных, которая предотвращает неправильное назначение объектов состояния.

сбор информации

  • axios: Реализовать запрос интерфейса данных (имитировать данные с помощью локального файла json).

Предварительный просмотр проекта

инициализация страницы

                                        

Выберите популярный город

                                   

Искать в других городах

                                   

реализовать функцию

Получить местный статус в режиме реального времени

При первом открытии страницы для отображения погоды в соответствии с городом, в котором мы находимся, нам нужно получить статус в реальном времени.Здесь я использую AutoNavi Map Web JS API. Во-первых, мы вводим тег сценария входа, который добавляет JS API на страницу в index.html в общей папке;

// key值需在官网上申请
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值">
</script>

Мы используем официальный интерфейс для достижения позиционирования в реальном времени.Поскольку информация о погоде должна отображаться в первый раз, мы используем функцию жизненного цикла componentDidMount, чтобы сделать этот запрос:

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, предоставляемый Gaode Map, здесь я прикрепляю официальный сайт,Не удается подключиться. Amapa.com/API/Java SCR…

визуализация данных диаграмм

Чтобы показать тенденцию изменения температуры, я использовал линейную диаграмму графиков для визуализации данных.

код реализации

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);  
}

Работа с Redux с помощью react-redux

react-redux — это официальное использование реакции для привязки Redux и размещения провайдера на верхнем уровне, чтобы хранилище могло быть получено следующими компонентами.

<Provider store={store}>      
   <Router>        
    <div>         
     <Route exact path='/' component={MainPage}></Route>          
     <Route exact path='/search' component={SearchCity}></Route>        
    </div>      
   </Router>
</Provider>

В компоненте мы используем connect() для получения состояния или действия отправки в магазине.Используя его характеристики, мы можем легко и удобно реализовать изменение и получение данных, таких как изменение города, исторический поиск и идентификатор решения.

Использование переходника промежуточного слоя

По умолчанию redux использует диспетчеризацию только для одного параметра объекта, функции и промисы запрещены, промежуточное ПО thunk может решить эту проблему, redux-thunk унифицирует вызывающие методы асинхронных и синхронных действий и помещает асинхронный процесс в уровень действия разрешен, и компонент не имеет никакого эффекта.Здесь я сотрудничаю с 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    
})

Я использую метод фильтра для условной фильтрации, возвращая данные, содержащие входное значение, и возвращая подсказку, если она пуста. Я использую официальный компонент 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 функции обратного вызова, когда значение текстового поля компонента изменяется, чтобы реализовать запрос интерфейса и отфильтровать содержимое, соответствующее условиям поиска для отображения. И используйте функцию обратного вызова handleChange выбранных параметров (панель отображения), чтобы изменить город штата в редуксе и одновременно перейти на домашнюю страницу, код:

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, вы также можете оставить сообщение для обмена ~

Категории