freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-libraries/redux/send-action-data-to-the-store.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036155	Надсилання даних про дії до сховища	6	301448	send-action-data-to-the-store

--description--

Ви вже дізнались як виконувати дії зі сховищем Redux, але досі ці дії не містили ніякої інформації, крім type. Ви також можете надсилати певні дані разом з вашими діями. Насправді це дуже поширене явище, тому що дії зазвичай виникають з певних взаємодій, і вони, як правило, мають у собі деякі дані. Сховище Redux зазвичай має знати про ці дані.

--instructions--

Є основний виконавець дій notesReducer() та addNoteText(), визначені в редакторі коду. Завершіть основну частину функції addNoteText(), щоб вона повернула об'єкт action. Об'єкт має включати властивість type зі значенням ADD_NOTE, а також набір властивостей text для даних note, які призначені для виконавця дій. При виклику виконавця дій, ви передаєте особливу інформацію, що маєте доступ до об'єкта.

Далі, завершіть написання команди switch у notesReducer(). Ви маєте додати випадок, який опрацьовує дії addNoteText(). Цей випадок має спрацьовувати щоразу, коли є дія типу ADD_NOTE і вона повинен повертатися як властивість text у вхідній action як новий state.

Ця дія виконується у нижній частині коду. Щойно закінчите, запустіть код і зверніть увагу на консоль. Це все, що потрібно, щоб надіслати особливі дані про дії у сховище та використовувати під час оновлення сховища state.

--hints--

Виконавець дій addNoteText повинен повертатися як об'єкт з ключами type та text.

assert(
  (function () {
    const addNoteFn = addNoteText('__TEST__NOTE');
    return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE';
  })()
);

Запуск дії типу ADD_NOTE з виконавцем дії addNoteText має оновлювати state до рядка, переданого виконавцю дій.

assert(
  (function () {
    const initialState = store.getState();
    store.dispatch(addNoteText('__TEST__NOTE'));
    const newState = store.getState();
    return initialState !== newState && newState === '__TEST__NOTE';
  })()
);

--seed--

--seed-contents--

const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // Change code below this line

    // Change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // Change code below this line

  // Change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello!'));
console.log(store.getState());

--solutions--

const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // Change code below this line
    case ADD_NOTE:
      return action.text;
    // Change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // Change code below this line
  return {
    type: ADD_NOTE,
    text: note
  }
  // Change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello Redux!'));
console.log(store.getState());