Шпаргалка по 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> |