В этой части давайте свяжем компоненты, которые мы создали в предыдущей части, и поговорим о редукции более подробно.
Давайте начнем добавлять новый компонент с именем search_bar.js в папку componentes:
Концептуально этот компонент является контейнером, поэтому я мог бы создать еще одну папку только для контейнеров, но пока не буду этого делать.
В этом компоненте search_bar.js я импортировал компонент connect из react-redux, и это необходимо для привязки компонента к создателям действий. Когда мы экспортируем компонент с помощью компонента подключения, у нас есть доступ к редукторам и создателям действий.
Компонент connect является компонентом более высокого порядка:
export default connect(null, actions)(SearchBar);
В этом случае у меня есть доступ ко всем функциям в моей папке действий (внутри index.js).
Следующий компонент, который мы создадим, — weather_list.js.
Как и компонент search_bar.js, weather_list также является контейнером и имеет доступ к редукторам, используя компонент connect более высокого порядка. .
Нам нужно установить еще один компонент под названием Numeral:
$ npm i numeral
Хорошо, давайте запустим приложение и посмотрим, как оно выглядит:
Отлично, теперь, если вы наберете любой город и нажмете Enter, я должен работать!
Пока нет, мы забываем сообщить react-redux, как работать с промисами. Когда мы возвращаемся, полезная нагрузка имеет обещание, а не реальную ценность.
export function fetchWeather(city) {
const url = `${ROOT_URL}&q=${city}&units=metric`;
const request = axios.get(url);
return {
type: FETCH_WEATHER,
payload: request
}
}
Чтобы исправить это, нам нужно установить другой компонент под названием redux-promise и изменить корневой файл index.js, чтобы использовать его в качестве промежуточного программного обеспечения.
$ npm i redux-promise
Теперь, если мы введем какой-нибудь город и нажмем Enter, у нас получится что-то:
Почти готово, давайте добавим немного стиля. Добавьте новый файл в общую папку с именем style.css:
Добавьте ссылку на этот файл в index.html (также в общую папку):
Наконец, добавьте класс контейнера в корневой div (строка 30).
<div class="container" id="root"></div>
Давай попробуем еще:
Хороший! наше приложение почти готово. В следующей части я расскажу о некоторых улучшениях redux и промежуточном программном обеспечении.
Часть 5: https://medium.com/@leonardobrunolima/react-series-weather-app-part-5-764e8559e84a
Спасибо!
Я обновлю репозиторий github для этого проекта, как только выпущу каждую часть этой серии. Вы можете подписаться или клонировать здесь:
