Создание actions
Наконец-то мы подходим к вопросу взаимодействия пользователя с приложением. Практически любое действие пользователя в интерфейсе = отправка действия (dispatch actions)
В нашем приложении по клику на кнопку года мы должны:
установить заголовок
загрузить фото этого года из VK
Сейчас предлагаю рассмотреть установку заголовка, так как загрузка фото требует выполнения асинхронного запроса, а чтобы добраться до этого, мы должны рассмотреть несколько интересных вещей. К тому же, установка заголовка отлично показывает на простом примере, как вращаются данные внутри redux-приложения, а именно:
Приложение получило начальное состояние (initial state)
Пользователь нажав кнопку, отправил действие (dispatch action)
Соответсвующий редьюсер обновил часть приложения, в согласии с тем, что узнал от действия.
Приложение изменилось и теперь отражает новое состояние.
... (все повторяется по кругу, с пункта 2)
Это и есть однонаправленный поток данных.
Создадим page actions (действия для сущности page):
src/actions/PageActions.js
export function setYear(year) {
return {
type: 'SET_YEAR',
payload: year,
}
}Напоминаю, что поле type - обязательное, а payload - "негласное" соглашение. Немного об этом, можно почитать на английском тут.
Научим редьюсер page реагировать на наше действие:
src/reducers/page.js
const initialState = {
year: 2018,
photos: [],
}
export function pageReducer(state = initialState, action) {
switch (action.type) {
case 'SET_YEAR':
return { ...state, year: action.payload }
default:
return state
}
}Обратите внимание, в аргументах у функции page указан второй аргумент - action. Это стандартные аргументы redux reducer'а. Благодаря этому, мы можем обрабатывать различные действия по их типу, попадая в нужную секцию case оператора switch.
Так же обратите внимание, что мы не изменили объект state, а вернули новый с полем year равным action.payload (а значит годом, выбранным пользователем, который был послан в action.payload).
Добавляем вызов actions из компонентов
(возможно, вы будете замечать у меня или в других руководствах, что говорят: стейт (state) приложения - это тоже самое, что и "стор" (store) приложения. Во втором издании учебника я везде стараюсь писать store, чтобы вы не путались со стейтом реакт компонента)
У нас есть action, и есть reducer готовый изменить store приложения. Но наш компонент не знает как обратиться к необходимому действию.
Согласно таблице из прошлого раздела: для изменения данных, наш компонент <Page />, должен вызывать callback из this.props, а наш контейнер* <App /> - отправлять действие (dispatch action).
* - я говорю, контейнер, хотя правильнее называть контейнером <Connect(App) />, но так как он генерируется функцией connect на основе App.js, считаю это допустимым.
Из документации функции connect, мы видим, что с помощью этой функции можно не только подписаться на обновления данных (mapStateToProps), но и "прокинуть" наши actions в контейнер (mapDispatchToProps).
connect, первым аргументом принимает "маппинг" (соответствие) state к props, а вторым маппинг dispatch к props. Как бы дико это не звучало, на практике это значит, что нам достаточно передать второй аргумент.
Исправим App.js
src/containers/App.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { User } from '../components/User'
import { Page } from '../components/Page'
import { setYear } from '../actions/PageActions'
import './App.css'
class App extends Component {
render() {
const { user, page, setYearAction } = this.props
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Мой топ фото</h1>
</header>
<User name={user.name} />
<Page photos={page.photos} year={page.year} setYear={setYearAction} />
</div>
)
}
}
const mapStateToProps = store => {
return {
user: store.user,
page: store.page,
}
}
const mapDispatchToProps = dispatch => {
return {
setYearAction: year => dispatch(setYear(year)), [1]
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App)Начнем с разбора mapDispatchToProps. Данная функция, первым аргументом получает dispatch, а значит мы можем теперь "диспатчить" экшены, которые будут пойманы редьюсером. Еще раз:только те экшены, которые были отправлены с помощью "диспетчера" будут пойманы редьюсером.
Затем мы внутри mapDispatchToProps вернули объект, который в итоге приклеится в this.props (так же, как и было в mapStateToProps).
И в конце, мы решили в "приклееном объекте" создать функцию setYearAction [1], суть которой сводится к следующему: "диспатчни" импортированный выше setYear с переданным годом.
Обычно пишут без добавления Action: setYear: year => dispatch(setYear(year)), но я хотел бы уменьшить путаницу для тех людей, кто не силен в основах JavaScript (а зря!) и сейчас может быстро запутаться.
Так же я пишу return, для того, чтобы вы могли удобно сконсолить значения аргументов, если вам что-то не понятно. Без return, можно написать так:
const mapDispatchToProps = dispatch => ({
setYearAction: year => dispatch(setYear(year)),
})После выполнения connect(mapStateToProps, mapDispatchToProps)(App), мы получили в <App /> новые свойства (props), что наглядно демонстрирует вкладка "React" в chrome dev tools.
Добавив setYear в свойства <Page />, не составит труда использовать необходимый action из компонента, который по прежнему знать ничего не знает о redux.
Добавим несколько кнопок с годами и обработчик клика на них, в котором будем считывать название года с самой кнопки и отправлять его с помощью экшена 'SET_YEAR' прямиком в редьюсер page.
src/components/Page.js
import React from 'react'
import PropTypes from 'prop-types'
export class Page extends React.Component {
onBtnClick = e => {
const year = +e.currentTarget.innerText
this.props.setYear(year)
}
render() {
const { year, photos } = this.props
return (
<div>
<div>
<button onClick={this.onBtnClick}>2018</button>
<button onClick={this.onBtnClick}>2017</button>
<button onClick={this.onBtnClick}>2016</button>
<button onClick={this.onBtnClick}>2015</button>
<button onClick={this.onBtnClick}>2014</button>
</div>
<p>
У тебя {photos.length} фото за {year} год
</p>
</div>
)
}
}
Page.propTypes = {
year: PropTypes.number.isRequired,
photos: PropTypes.array.isRequired,
setYear: PropTypes.func.isRequired, // добавили новое свойство в propTypes
}Сейчас если кликнуть на кнопку с годом, то в приложении год будет изменяться. Вау?)
Что происходит: по клику на кнопку, вызывается переданное в свойствах функция, в которой диспатчится экшен (с типом SET_YEAR и годом). Затем, так как этот экшен был "диспатчнут" он пролетает через все редьюсеры (у нас их два: user и page). Так как в page есть case 'SET_YEAR' - редьюсер возвращает новое состояние, а именно - берет все что было в нашем state (по факту - все что было в данном "куске пирога" от стора связанное с page) и возвращает новое значение года:
case 'SET_YEAR':
return { ...state, year: action.payload }Затем, так как год изменился, в компоненте <App /> случилось обновление, так как внутри mapStateToProps мы подписаны на изменение данных из редьюсера page. Раз случилось обновление, значит перерисовались все потомки и в том числе, в компонент <Page /> ушло новое значение года.
p.s. в коде было использовано свойство DOM-элемента textContent
p.p.s. можете добавить console.log(store) в mapStateToProps и посмотреть есть ли новые данные.
const mapStateToProps = store => {
console.log(store)
return {
user: store.user,
page: store.page,
}
}
Глава выдалась достаточно длинной, а хуже всего, что мы написали "кипу" кода, всего лишь для обновления цифры в заголовке. Где профит, как говорится?
Профит обнаружится дальше, когда ваше приложение разрастется. Когда его будет необходимо поддерживать и добавлять новые фичи. За счет однонаправленного потока данных (юзер кликнул - действие вызвалось - редьюсер изменил состояние - компонент отрисовал изменения) даже в приложении, написанном давно, у вас получится очень быстро разобраться и внести необходимые обновления, которые требует бизнес.
Итого: мы научились обновлять Redux-приложение правильно: диспатчить экшен и реагировать на экшен в редьюсере.
Last updated
Was this helpful?