freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-libraries/react-and-redux/getting-started-with-react-redux.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036141	Початок роботи з React Redux	6	301430	getting-started-with-react-redux

--description--

Ця низка завдань показує те, як можна використовувати Redux з React. По-перше, ось огляд деяких ключових принципів кожної технології. React - це бібліотека, якій ви надаєте дані. Потім вона візуалізує перегляд у більш ефективний, передбачуваний спосіб. Redux - це система управління станом, яку ви можете використовувати для спрощення управління станом вашого застосунку. Зазвичай, у додатку React Redux, ви створюєте одне сховище Redux, яке керує станом усього застосунку. Ваші компоненти React підписуються лише на ті частини даних в сховищі, що мають відношення до їхньої ролі. Потім ви відправляєте дії безпосередньо від компонентів React, які потім запускають оновлення сховища.

Хоча компоненти React можуть локально керувати своїм станом, коли у вас є складний застосунок, зазвичай, краще зберігати стан застосунку в одному місці за допомогою Redux. Існують винятки, коли окремі компоненти можуть мати локальний стан, створений конкретно лише для них. Зрештою, через те, що Redux не створений для нестандартної роботи з React, вам потрібно використовувати пакет react-redux. Він надає вам можливість передавати Redux state та dispatch вашим компонентам React як props.

Перш за все, у декількох наступних завданнях ви створите простий компонент React, який дозволить вам вводити нові повідомлення. Вони додаються до масиву, що відображається в огляді. Це має бути хороший огляд того, що ви вивчили на уроках React. Далі ви створите сховище Redux та дії, які керують станом масиву повідомлень. Зрештою, ви використовуватимете react-redux для того, щоб з'єднати сховище Redux з вашим компонентом, таким чином додаючи локальний стан в сховище Redux.

--instructions--

Почніть з компоненту DisplayMessages. Додайте конструктора до цього компонента та ініціалізуйте його за допомогою двох параметрів: input, це значення задається у порожньому рядку і messages, це значення задається у порожньому масиві.

--hints--

Компонент DisplayMessages повинен відображати порожній div елемент.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
    return mockedComponent.find('div').text() === '';
  })()
);

Конструктор DisplayMessages повинен викликатися належним чином за допомогою super, при передачі до props.

(getUserInput) =>
  assert(
    (function () {
      const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
      return (
        noWhiteSpace.includes('constructor(props)') &&
        noWhiteSpace.includes('super(props')
      );
    })()
  );

Компонент DisplayMessages повинен мати початковий стан, який дорівнює {input: "", messages: []}.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
    const initialState = mockedComponent.state();
    return (
      typeof initialState === 'object' &&
      initialState.input === '' &&
      Array.isArray(initialState.messages) &&
      initialState.messages.length === 0
    );
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<DisplayMessages />, document.getElementById('root'))

--seed-contents--

class DisplayMessages extends React.Component {
  // Change code below this line

  // Change code above this line
  render() {
    return <div />
  }
};

--solutions--

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  render() {
    return <div/>
  }
};