86 lines
2.8 KiB
Markdown
86 lines
2.8 KiB
Markdown
|
---
|
|||
|
|
id: 5a24c314108439a4d403614f
|
|||
|
|
title: Відправлення події дії
|
|||
|
|
challengeType: 6
|
|||
|
|
forumTopicId: 301442
|
|||
|
|
dashedName: dispatch-an-action-event
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Метод `dispatch` це те, що ви використовуєте для відправлення дій до сховища Redux. Виклик `store.dispatch()` і передача значення, повернутого від виконавця дії, відправляє дію назад у сховище.
|
|||
|
|
|
|||
|
|
Згадайте що виконавці дій повертають об'єкт з властивістю типу, яка вказує дію, що відбулася. Тоді метод відправляє об'єкт дії до сховища Redux. На підставі прикладу з попереднього завдання, наступні рядки є еквівалентними, і обидва відправляють дію типу `LOGIN`:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
store.dispatch(actionCreator());
|
|||
|
|
store.dispatch({ type: 'LOGIN' });
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Сховище Redux у редакторі коду має ініціалізований стан, де об'єкт містить властивість `login`, яка в даний момент встановлена на `false`. Існує також виконавець дії з назвою `loginAction()`, що повертає дію типу `LOGIN`. Відправте дію `LOGIN` до сховища Redux шляхом виклику методу `dispatch`, і передайте в дію створену `loginAction()`.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Виклик функції `loginAction` повинен повернути об'єкт з набором параметрів `type` до рядку `LOGIN`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(loginAction().type === 'LOGIN');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Сховище має бути ініціалізованим з об'єктом, що має параметр `login` встановлений на `false`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(store.getState().login === false);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Метод `store.dispatch()` використовується для відправлення дії типу `LOGIN`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
(getUserInput) =>
|
|||
|
|
assert(
|
|||
|
|
(function () {
|
|||
|
|
let noWhiteSpace = getUserInput('index').replace(/\s/g, '');
|
|||
|
|
return (
|
|||
|
|
noWhiteSpace.includes('store.dispatch(loginAction())') ||
|
|||
|
|
noWhiteSpace.includes("store.dispatch({type: 'LOGIN'})") === true
|
|||
|
|
);
|
|||
|
|
})()
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
const store = Redux.createStore(
|
|||
|
|
(state = {login: false}) => state
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const loginAction = () => {
|
|||
|
|
return {
|
|||
|
|
type: 'LOGIN'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Dispatch the action here:
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
const store = Redux.createStore(
|
|||
|
|
(state = {login: false}) => state
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const loginAction = () => {
|
|||
|
|
return {
|
|||
|
|
type: 'LOGIN'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
store.dispatch(loginAction());
|
|||
|
|
```
|