freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-li.../react-and-redux/map-state-to-props.md

3.0 KiB
Raw Blame History

id title challengeType forumTopicId dashedName
5a24c314108439a4d4036145 Схема розподілу State (стану) в Props 6 301433 map-state-to-props

--description--

The Provider дозволяє забезпечення надходження state і dispatch до компонентів React, але ви повинні точно вказати, який state та дії ви хочете. Таким чином, ви переконаєтесь, що кожен компонент має доступ лише до state, який йому потрібен. Ви досягнете цього, створюючи дві функції: mapStateToProps() і mapDispatchToProps().

У цих функціях ви декларуєте, до яких частин state ви хочете мати доступ і до яких авторів дій потрібно надіслати. Після того, як ці функції будуть встановлені, ви побачите, як за допомогою методу React Redux connect з'єднати їх зі своїми компонентами в іншому виклику.

**Note:**За межами React Redux використовується метод store.subscribe() для реалізації mapStateToProps().

--instructions--

Створіть функцію mapStateToProps(). Ця функція повинна приймати state в якості аргумента, а потім повертати об’єкт, який відображає цей стан з конкретними іменами властивостей. Ці властивості стають доступними для компонента за допомогою props. З того моменту коли в прикладі зберігається весь state програми в одному масиві, ви можете передати весь цей state своєму компоненту. Створіть властивість messages в об’єкті, який повертається, і встановіть для нього state.

--hints--

The const state має бути порожнім масивом.

assert(Array.isArray(state) && state.length === 0);

mapStateToProps повинна бути функцією.

assert(typeof mapStateToProps === 'function');

mapStateToProps повинна повертатися як об'єкт.

assert(typeof mapStateToProps() === 'object');

Передача масиву як state mapStateToProps має повернути цей масив, призначений ключу messages.

assert(mapStateToProps(['messages']).messages.pop() === 'messages');

--seed--

--seed-contents--

const state = [];

// Change code below this line

--solutions--

const state = [];

// Change code below this line

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};