Шпаргалка по Redux (Stylesheet Jest)
Создание хранилища
Хранилище создается с помощью редуктора, принимающего текущее состояние и возвращающего новое состояние на основе полученной операции.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">createStore</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'redux'</span> <span class="pl-c">// Редуктор</span> <span class="pl-k">function</span> <span class="pl-en">counter</span> <span class="pl-kos">(</span>state <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-c1">0</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">action</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">switch</span> <span class="pl-kos">(</span><span class="pl-s1">action</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">case</span> <span class="pl-s">'INCREMENT'</span>: <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">+</span> <span class="pl-c1">1</span> <span class="pl-kos">}</span> <span class="pl-k">case</span> <span class="pl-s">'DECREMENT'</span>: <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span> <span class="pl-kos">}</span> <span class="pl-k">default</span>: <span class="pl-k">return</span> <span class="pl-s1">state</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-k">const</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-en">createStore</span><span class="pl-kos">(</span><span class="pl-s1">counter</span><span class="pl-kos">)</span> <span class="pl-c">// Опционально, в качестве второго аргумента можно передать начальное состояние - `initialState`</span> <span class="pl-k">const</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-en">createStore</span><span class="pl-kos">(</span><span class="pl-s1">counter</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-c1">0</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> |
Использование хранилища
Для того, чтобы измененить состояние хранилища, необходимо отправить операцию в редуктор:
1 2 3 4 5 6 7 8 9 10 11 | <span class="pl-k">let</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-en">createStore</span><span class="pl-kos">(</span><span class="pl-s1">counter</span><span class="pl-kos">)</span> <span class="pl-c">// Отправляем операции; это приводит к изменению состояния</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-s">'INCREMENT'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-s">'DECREMENT'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c">// Получаем текущее состояние</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">getState</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c">// Регистрируем изменения</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-kos">)</span> |
Провайдер
Компонент <Provider> делает хранилище доступны для компонентов. Компонент подключается к хранилищу с помощью метода connect():
1 2 3 4 5 6 | <span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Provider</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-redux'</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">Provider</span> <span class="pl-c1">store</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">store</span><span class="pl-kos">}</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">App</span> /<span class="pl-c1">></span> <span class="pl-c1"><</span>/<span class="pl-ent">Provider</span><span class="pl-c1">></span><span class="pl-kos">,</span> <span class="pl-s1">mountNode</span><span class="pl-kos">)</span> |
Привязка (mapping) состояния
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">connect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-redux'</span> <span class="pl-c">// Функциональный компонент</span> <span class="pl-k">function</span> <span class="pl-v">App</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-s1">message</span><span class="pl-kos">,</span> <span class="pl-s1">onMessageClick</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">onMessageClick</span><span class="pl-kos">(</span><span class="pl-s">'Привет!'</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">></span> <span class="pl-kos">{</span><span class="pl-s1">message</span><span class="pl-kos">}</span> <span class="pl-c1"><</span>/<span class="pl-ent">div</span><span class="pl-c1">></span> <span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-c">// Привязываем `state` к `props`:</span> <span class="pl-k">function</span> <span class="pl-en">mapState</span> <span class="pl-kos">(</span><span class="pl-s1">state</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-c1">message</span>: <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">message</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-c">// Привязываем `dispatch` к `props`:</span> <span class="pl-k">function</span> <span class="pl-en">mapDispatch</span> <span class="pl-kos">(</span><span class="pl-s1">dispatch</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-en">onMessageClick</span> <span class="pl-kos">(</span><span class="pl-s1">message</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">dispatch</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-s">'click'</span><span class="pl-kos">,</span> message <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-c">// Подключаем их</span> <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-s1">mapState</span><span class="pl-kos">,</span> <span class="pl-s1">mapDispatch</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">App</span><span class="pl-kos">)</span> |
Объединение редукторов
1 2 3 | <span class="pl-k">const</span> <span class="pl-s1">reducer</span> <span class="pl-c1">=</span> <span class="pl-en">combineReducers</span><span class="pl-kos">(</span><span class="pl-kos">{</span> counter<span class="pl-kos">,</span> user<span class="pl-kos">,</span> store <span class="pl-kos">}</span><span class="pl-kos">)</span> |
Посредники
Посредники (middlewares) — это декораторы для dispatch(), позволяющие принимать операции и выполнять определяемые ими задачи:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="pl-c">// Бесполезный посредник</span> <span class="pl-k">const</span> <span class="pl-en">logger</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span> <span class="pl-c1">=></span> <span class="pl-s1">dispatch</span> <span class="pl-c1">=></span> <span class="pl-s1">action</span> <span class="pl-kos">{</span> <span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-s1">action</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-k">const</span> <span class="pl-en">logger</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-c">// Данная функция запускается в `createStore()`</span> <span class="pl-c">// и возвращает декоратор для `dispatch()`</span> <span class="pl-k">return</span> <span class="pl-s1">dispatch</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-c">// Также запускается в `createStore()`</span> <span class="pl-c">// и возвращает новую функцию `dispatch()`</span> <span class="pl-k">return</span> <span class="pl-s1">action</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-c">// Запускается при каждом выполнении `dispatch()`</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> |
Применение посредников
1 2 3 | <span class="pl-k">const</span> <span class="pl-s1">enhancer</span> <span class="pl-c1">=</span> <span class="pl-en">applyMiddleware</span><span class="pl-kos">(</span><span class="pl-s1">logger</span><span class="pl-kos">,</span> <span class="pl-s1">thunk</span><span class="pl-kos">,</span> ...<span class="pl-kos">)</span> <span class="pl-k">const</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-en">createStore</span><span class="pl-kos">(</span><span class="pl-s1">reducer</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">enhancer</span><span class="pl-kos">)</span> |
Шпаргалка по Redux. Лучшие практики по использованию React
- Названия компонентов должны начинаться с большой буквы.
- Компоненты должны быть маленькими и отвечать за выполнение одной задачи.
- Компоненты должны иметь небольшое описание.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="pl-c">/**</span> <span class="pl-c">*</span> <span class="pl-c">* Author: {...}</span> <span class="pl-c">* Description: {...}</span> <span class="pl-c">* Dependencies: {...}</span> <span class="pl-c">*</span> <span class="pl-c">**/</span> <span class="pl-k">const</span> <span class="pl-v">SampleComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">div</span><span class="pl-c1">></span> Пример компонента <span class="pl-c1"><</span>/<span class="pl-ent">div</span><span class="pl-c1">></span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">SampleComponent</span><span class="pl-kos">;</span> |
- В коде должен использоваться синтаксис ES6.
- Названия переменных и функций, которые не являются константами и конструкторами, соответственно, и которые состоят из нескольких слов, должны быть в стиле lowerCamelCased.
- Предопределенные константы именуются в верхнем регистре, слова разделяются нижним подчеркиванием — UPPER_UNDERSCORED.
- При проверке типа переменной, название типа указывается в кавычках (не оборачивается в фигурные скобки), а для сравнения используется оператор строго равенства:
1 2 3 | <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">myVariable</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// ...</span> <span class="pl-kos">}</span> |
- В простых случаях вместо оператора
if/elseдолжен использоваться тернарный оператор:
1 2 3 4 5 6 7 8 9 | <span class="pl-c">// if/else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">condition</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">//...</span> <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span> <span class="pl-c">//...</span> <span class="pl-kos">}</span> <span class="pl-c">// тернарный оператор</span> <span class="pl-k">const</span> <span class="pl-s1">myVariable</span> <span class="pl-c1">=</span> <span class="pl-s1">condition</span> ? <span class="pl-s1">exprIfTrue</span> : <span class="pl-s1">exprIfFalse</span> |
- Вместо контейнеров следует использовать фрагменты:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="pl-c">//...</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">Fragment</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>Какой-то текст.<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">h2</span><span class="pl-c1">></span>Заголовок<span class="pl-c1"><</span>/<span class="pl-ent">h2</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>Еще текст.<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">h2</span><span class="pl-c1">></span>Другой заголовок<span class="pl-c1"><</span>/<span class="pl-ent">h2</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>И снова текст.<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> <span class="pl-c1"><</span>/<span class="pl-ent">Fragment</span><span class="pl-c1">></span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> |
Сокращенный вариант:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="pl-c">//...</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>Какой-то текст.<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">h2</span><span class="pl-c1">></span>Заголовок<span class="pl-c1"><</span>/<span class="pl-ent">h2</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>Еще текст.<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">h2</span><span class="pl-c1">></span>Другой заголовок<span class="pl-c1"><</span>/<span class="pl-ent">h2</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>И снова текст.<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> <span class="pl-c1"><</span>/<span class="pl-c1">></span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> |
- Все файлы, относящиеся к одному компоненту, должны находиться в одной директории
- Следует отдавать предпочтение функциональным компонентам.
- В качестве обработчиков событий не следует использовать анонимные функции.
- Следует избегать использования встроенных стилей.
- Чтобы скрыть компонент, нужно вернуть
nullпри его рендеринге. - Компоненты высшего порядка должны использоваться только для решения проблем взаимодействия компонентов между собой.
- Индексы элементов массива не должны использоваться в качестве ключей (
keys). - В JSX вместо тернарного оператора могут использоваться короткие вычисления:
1 2 3 4 5 6 7 | <span class="pl-k">const</span> <span class="pl-en">sampleComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">isTrue</span> ? <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>Естина<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> : <span class="pl-c1">null</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-en">sampleComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">isTrue</span> <span class="pl-c1">&&</span> <span class="pl-c1"><</span><span class="pl-ent">p</span><span class="pl-c1">></span>Естина<span class="pl-c1"><</span>/<span class="pl-ent">p</span><span class="pl-c1">></span> <span class="pl-kos">}</span><span class="pl-kos">;</span> |
Возможно вам будет интересно — Возможно вам будет интересно — Шпаргалка по Jest с примерами кода.
