В этой статье вы прочитаете основы библиотеки Redux, но без React, как его объединить с ним посмотрим в одной из будущих статей.
Также посмотрите статью «Быстрый старт на React.js», в ней вы узнает основные принципы фреймворка React.
Что такое Redux:
Redux это специальная библиотека созданная для работы с данными в компании facebook.
Дело в том, что сам React и JS в частности не особо умеет работать с данными, и для удобства создали как раз Redux, более удобно работе с ними.
Ещё вам не обязательно его использовать с React.js, вы его вполне сможете использовать и с другими фреймворками, и даже на стороне сервера, на Node.js
Как установить Redux:
Теперь перейдём к установки Redux, установить его можно только через NPM:
1 | npm install --save redux |
Больше вы не как не установите его, также у вас должен быть bubel.
Принципе работы Redux:
Теперь разберём основные принципы работы с Redux, для наглядности я покажу вам такую схему:
Давайте внимательно посмотрим на схему и разберём что к чему у неё твориться, в начале мы вызываем Actions, например при нажатие кнопки.
Он в свою очередь отправляется в Reducer, он выполняет какое то действие и потом обновляет Store который содержит State, его выводим в интерфейс.
То есть если кратко говоря, то мы обновили State отправив Actions в Reducer, вот список что и для чего:
- Action — Действие;
- Reducer — Функция для изменения состояния;
- Store — Главный объект который в себе всё содержит;
- State — Состояние или данные;
Основы работы с Redux:
Теперь перейдём к работе с этой библиотеки, покажу вам не большой пример из официальной документации, ссылка ниже.
Сначала сделаем редюсер:
1 2 3 4 5 6 7 8 9 10 11 12 | // Создание Редюсера function counterReducer(state = { value: 0 }, action) { // Выбор типа action switch (action.type) { case 'counter/incremented': return { value: state.value + 1 } case 'counter/decremented': return { value: state.value - 1 } default: return state } } |
Давайте разберём из чего состоит редюсер, первое мы в него передаём базовое состояние и action, внутри же мы используем оператор switch который проверяет чему равен action.type, который в себе хранит тип действия виде обычной строки.
После того как проверит и зависимо от действия вернёт новое состояние state, если действия нет, то вернёт тикушие состояние.
Теперь нам нужно создать Store, делается это через функцию createStore(), в качестве параметра она принимает редюсер:
1 | let store = createStore(counterReducer) |
Теперь можем делать какие то действия, сам store в себе хранит три метода, вот они:
- subscribe() — Используется при изменение state;
- getState() — Получает State;
- dispatch() — Вызывает Action;
Давайте теперь рассмотрим полноценную работу со всем этим, вот не большой код:
1 2 3 4 5 6 7 8 9 | // Проверка изменений store.subscribe(() => console.log(store.getState())) // Делаем инкремент store.dispatch({ type: 'counter/incremented' }) // Делаем инкремент store.dispatch({ type: 'counter/incremented' }) // Делаем декремент store.dispatch({ type: 'counter/decremented' }) |
В начале мы запустили subscribe() которая будет выводить в консоль браузера состояние когда он измениться, потом вызываем три раза dispatch(), сначала инкремент, потом один раз декремент, и того конечный результат будет {value: 0}.
В целом как видите всё очень просто, но ещё стоит упомянуть в action параметр payload, дело в том, что вам иногда надо будет передать какие либо данные для state, и для этого в объекте action используете этот параметр.
Вот вам не большой пример кода используя его:
1 2 3 4 5 6 7 8 9 10 | function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/plus': return { value: state.value + action.payload } case 'counter/minus': return { value: state.value - action.payload } default: return state } } |
Как видите мы тут изменили редюсер, теперь к state мы будем добавлять не просто единицу а какое то число, но теперь мы для action для удобства мы сделаем функцию, которая будет возвращать объект с type и payload.
Вот пример этого:
1 2 3 4 5 6 | const counterPlus = (n) => { return { type: 'counter/plus', payload: n } } |
То есть мы payload назначаем из параметра который передали в функцию, теперь её можем передать в dispatch(), примерно так:
1 | store.dispatch(counterPlus(22)) |
Для старта и чтобы делать простые задачи с Redux, вам этого хватит.
Вывод:
В этой статье вы прочитали про основы Redux, в целом всё просто, но в будущем будет ещё больше статьей на эту тему.
Подписываетесь на соц-сети:
Оценка:
Загрузка...