redux-course-ru-v2
Search…
Основы Redux (теория)
Курс рассчитан на создание приложения по шагам, а это значит максимум практики и минимум теории. Этот самый минимум, перед вами.
Давайте еще раз взглянем на схему нашего приложения: 
В шапке слева заголовок и три кнопки выбора года. Ниже - фото соответствующего года, отсортированное по количеству лайков.
В шапке справа - ссылка войти/выйти.
Представим, как должны выглядеть данные для такой страницы:
1
app: {
2
page: {
3
year: 2016,
4
photos: [photo, photo, photo...]
5
},
6
user: {
7
name: 'Имя',
8
...
9
}
10
}
Copied!
Поздравляю вас, мы только что описали как должно выглядеть состояние (state) нашего приложения.
За содержание всего состояния нашего приложения, отвечает объект Store. Как уже не раз упоминалось - это обычный объект
{}. Важно, что в отличии от Flux, в Redux только один объект Store.Не хочется оставлять вас надолго без практики, поэтому процесс создания store и немного подробностей про него я аккуратно вплету в следующие главы, а пока достаточно того, что: store, "объединяет" редьюсер(ы) (reducer) и действия (actions), а так же имеет несколько чрезвычайно полезных методов, например:
getState()- позволяет получить состояние приложения;dispatch(action)- позволяет обновлять состояния, путем вызова ("диспатча") действия;subcribe(listener)- регистрирует слушателей;
Actions
Actions описывают действия.
Actions - это объект. Обязательное поле - type. Так же, если вы хотите следовать соглашению, все данные, которые передаются вместе с действием, кладите внутрь свойства payload. Таким образом, для нашего приложения, мы можем составить, например такую пару действий (actions):
1
{
2
type: 'ЗАГРУЗИ_ФОТО',
3
payload: 2018 //год
4
}
Copied!
1
{
2
type: 'ФОТО_ЗАГРУЖЕНЫ_УСПЕШНО',
3
payload: [массив фото]
4
}
Copied!
Чтобы вызвать actions, мы должны написать функцию, которая в рамках Flux/Redux называется - ActionsCreator (создатель действия), но перед этим стоит принять во внимание, что обычно тип действия, описывают как константу.
Например, константы нашего проекта:
1
const GET_PHOTO_REQUEST = 'GET_PHOTO_REQUEST'
2
const GET_PHOTO_SUCCESS = 'GET_PHOTO_SUCCESS'
Copied!
Не все любят данный подход с константами, но он был родоначальником, плюс его легко объяснить. К тому же, я до сих пор сторонник этого подхода.
Вернемся, к ActionsCreator, один из наших "создателей действий", выглядел бы так:
1
function getPhotos(year) {
2
return {
3
type: GET_PHOTOS,
4
payload: year
5
}
6
}
7
8
// я буду использовать синтаксис function внутри actions, так как не вижу смысла
9
// в изменении его на такую запись:
10
11
const getPhotos = (year) => ({
12
type: GET_PHOTOS,
13
payload: year,
14
})
Copied!
Итого: actions сообщает нашему приложению - "Эй, что-то произошло! И я знаю, что именно!"
Reducer
"Actions описывает факт, что что-то произошло, но не указывает, как состояние приложения должно измениться в ответ, это работа для Reducer'а" - (офф. документация)
Наше приложение не нуждается в нескольких редьюсерах, но крайне необходимо познакомить читателя с reducer composition, так как это фундаментальный шаблон построения redux приложений: мы разбиваем наше глобальное состояние на кусочки, за каждый кусочек отвечает свой reducer. Кусочки объединяются в Корневом Редьюсере (rootReducer).
Для того, чтобы научиться комбинировать редьюсеры, мы добавим в приложение reducer - user, который просто будет отображать имя, если пользователь залогинился. Ниже на схеме - сноска [1].
Схематично, наше приложение можно представить так:
redux-schema-with-reducers
Так как у нас есть reducer'ы
page и user, можно представить следующий диалог:1
pageActions: Пришло 123 фото
2
Reducer (page): Ок, нужно положить эти 123 фото в page.photos
Copied!
А на js выглядело бы так:
1
function page(state = initialState, action) {
2
switch (action.type) {
3
case GET_PHOTO_SUCCESS:
4
return Object.assign({}, state, {
5
photos: action.payload
6
})
7
default:
8
return state
9
}
10
}
Copied!
Обратите внимание, мы не мутировали наш state, мы создали новый state. Это важно. Крайне важно. В редьюсере, мы всегда должны возвращать новый объект, а не измененный предыдущий.
На практике, я буду использовать object spread syntax, поэтому предыдущую функцию с Object.assign можно переписать следующим образом:
1
function page(state = initialState, action) {
2
switch (action.type) {
3
case GET_PHOTO_SUCCESS:
4
return {...state, photos: action.payload} //Object spread syntax
5
default:
6
return state
7
}
8
}
Copied!
Объект, который мы возвращаем в редьюсере, далее с помощью функции
connect, превратится в свойства для компонентов. Таким образом, если продолжить пример с фото, то можно написать такой псевдо-код:1
<Page photos={reducerPage.photos} />
Copied!
Благодаря этому, внутри компонента
<Page />, мы сможем получить фото, как this.props.photosЯ постарался очень кратко дать самую важную теорию.
Если что-то осталось не понятным, не переживайте, на практике мы все закрепим и тогда все встанет на свои места.
Итого: Redux - однонаправленный поток данных в вашем приложении. Случилось действие от юзера - полетел экшен, экшен был пойман редьюсером - изменились пропсы у React-компонента -> компонент перерисовался.
Last modified 2yr ago