{"id":2337,"date":"2022-01-26T11:38:41","date_gmt":"2022-01-26T11:38:41","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2337"},"modified":"2022-01-26T11:38:41","modified_gmt":"2022-01-26T11:38:41","slug":"%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bf%d1%80%d0%b8%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f-%d0%bf%d0%bb%d0%b0%d0%bd%d0%b8%d1%80%d0%be%d0%b2%d1%89%d0%b8%d0%ba%d0%b0-%d0%b2-react","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2337","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f-\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u0432 React \u0441 Easy Peasy \u0438 Ant Design"},"content":{"rendered":"\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f-\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0438 \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u043d\u0430\u0448\u0443 \u0436\u0438\u0437\u043d\u044c. \u041e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u043d\u0430\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u043b\u0430 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043d\u044f.&nbsp;<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u0414\u0430\u043d\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043d\u0430\u0443\u0447\u0438\u0442 \u0432\u0430\u0441 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u0435\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React. \u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 <a href=\"https:\/\/easy-peasy.dev\" rel=\"noreferrer noopener\" target=\"_blank\">Easy Peasy<\/a>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u044f UI \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/ant.design\/\" rel=\"noreferrer noopener\" target=\"_blank\">Ant Design<\/a>.&nbsp;<\/p>\n\n\n\n<p>\u041f\u043e \u0438\u0442\u043e\u0433\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn-images-1.medium.com\/max\/1000\/0*_GwiF4PVA2UmTX52.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c!&nbsp;<\/p>\n\n\n\n<h3 id=\"h-\">\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u0442\u0430\u043f&nbsp;<\/h3>\n\n\n\n<h4 id=\"h--1\"><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 React, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app todo-easy-peasy<\/code><\/pre>\n\n\n\n<h4 id=\"h--2\"><strong>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0422\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430:&nbsp;<\/p>\n\n\n\n<ul><li><code>easy-peasy<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0430\u0437\u043d\u044b\u043c \u0447\u0430\u0441\u0442\u044f\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.&nbsp;<\/li><li><code>antd<\/code> \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 Ant Design.&nbsp;<\/li><li><code>nanoid<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c ID \u043f\u043e\u043b\u0435\u0439.<\/li><\/ul>\n\n\n\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c bash-\u043a\u043e\u043c\u0430\u043d\u0434\u0443:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i easy-peasy antd nanoid<\/code><\/pre>\n\n\n\n<h4 id=\"h--3\"><strong>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430&nbsp;\u043f\u0440\u043e\u0435\u043a\u0442\u0430&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u044f \u043a\u043e\u0434 \u0438 \u0434\u043e\u0431\u0438\u0432\u0430\u044f\u0441\u044c \u0435\u0433\u043e \u0447\u0438\u0441\u0442\u043e\u0442\u044b.&nbsp;<\/p>\n\n\n\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>src<\/code> \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438:&nbsp;<\/p>\n\n\n\n<ul><li><code>components<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432;&nbsp;<\/li><li><code>store<\/code> \u0441\u0442\u0430\u043d\u0435\u0442 \u043c\u0435\u0441\u0442\u043e\u043c \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 Easy Peasy, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. &nbsp;<\/li><\/ul>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043d\u0438\u0436\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e bash-\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd src #\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <br>mkdir components store<\/code><\/pre>\n\n\n\n<p>\u0418 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn-images-1.medium.com\/max\/1000\/0*iznc9SSKm0F2lkYf.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 id=\"h--4\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f-\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430&nbsp;<\/h3>\n\n\n\n<h4 id=\"h--5\"><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430&nbsp;\u0434\u0435\u043b&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0434\u0435\u043b.&nbsp;<\/p>\n\n\n\n<p>\u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>components<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>TodoItem.js<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { List, Button, Typography } from \"antd\";<br>const { Text } = Typography;<br><br>export default function TodoItem({ todo }) {<br>  return (<br>    &lt;&gt;<br>      &lt;List.Item&gt;<br>        &lt;Text&gt; {todo.task} &lt;\/Text&gt;<br>      &lt;\/List.Item&gt;<br>    &lt;\/&gt;<br>  );<br>}<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 4. \u041c\u043e\u0434\u0443\u043b\u044c <code>TodoItem<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>todo<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 8. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 <code>task<\/code> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>todo<\/code>.&nbsp;<\/li><\/ul>\n\n\n\n<h4 id=\"h--6\"><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>store<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>todoStore.js<\/code>. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.&nbsp;<\/p>\n\n\n\n<p>\u0412 <code>store\/todoStore.js<\/code> \u043f\u0438\u0448\u0435\u043c \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { createStore } from \"easy-peasy\";<br><br>const todoModel = {<br>  todos: &#91;{ id: 1, task: \"Pick up eggs\" }]<br>};<br>const store = {<br>  todoModel<br>};<br>export default createStore(store);<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 4. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>todos<\/code>.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 9. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044f \u0435\u0433\u043e \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c.&nbsp;<\/li><\/ul>\n\n\n\n<h4 id=\"h--7\"><strong>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430&nbsp;\u0434\u0435\u043b&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u200a\u2014\u200a \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React, \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.&nbsp;<\/p>\n\n\n\n<p>\u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>components<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>TodoList.js<\/code> \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u043d\u0435\u043c \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { List } from \"antd\";<br>import TodoItem from \".\/TodoItem\";<br>import { useStoreState } from \"easy-peasy\";<br>export default function TodoList() {<br>  const todos = useStoreState((state) =&gt; state.todoModel.todos);<br>  return (<br>    &lt;div&gt;<br>      {todos &amp;&amp; (<br>        &lt;List<br>          itemLayout=\"horizontal\"<br>          dataSource={todos}<br>          renderItem={(item) =&gt; &lt;TodoItem todo={item} \/&gt;}<br>        \/&gt;<br>      )}<br>    &lt;\/div&gt;<br>  );<br>}<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 5. \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>todos<\/code> \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0438 9\u201312. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>List<\/code> \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u0435\u043b, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>TodoItem<\/code>.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 <code>src\/App.js<\/code> \u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { StoreProvider } from \"easy-peasy\";<br>import \"antd\/dist\/antd.css\";<br>import TodoList from \".\/components\/TodoList\";<br>import store from \".\/store\/todoStore\";<br><br>export default function App() {<br>  return (<br>    &lt;div className=\"App\"&gt;<br>      &lt;StoreProvider store={store}&gt;<br>        &lt;TodoList \/&gt;<br>      &lt;\/StoreProvider&gt;<br>    &lt;\/div&gt;<br>  );<br>}<\/code><\/pre>\n\n\n\n<ul><li>\u041e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>TodoList<\/code> \u0442\u0435\u0433\u0430\u043c\u0438 <code>StoreProvider<\/code>. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>store<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0417\u0430\u0434\u0430\u0447\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u200a\u2014\u200a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043e\u0434\u0430:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn-images-1.medium.com\/max\/1000\/0*zWTCg-N6kAbmuRmz.png\" alt=\"\"\/><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430&nbsp;<\/figcaption><\/figure>\n\n\n\n<h4 id=\"h--8\"><strong>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a&nbsp;\u0434\u0435\u043b&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0435\u043b \u043d\u043e\u0432\u044b\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438.&nbsp;<\/p>\n\n\n\n<p>\u0412 <code>store\/todoStore.js<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>todoModel<\/code> \u0438 \u0432\u043d\u043e\u0441\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>addTodo<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { action } from \"easy-peasy\";<br>import { nanoid } from \"nanoid\";<br>const todoModel = {<br>   addTodo: action((state, payload) =&gt; {<br>    payload.id = nanoid();<br>     state.todos.push(payload);<br>  }),<br>  \/\/\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u043a\u043e\u0434... <\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 4. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 <code>addTodo<\/code>.<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 5. \u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c <code>id<\/code> \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u043e\u0434\u0443\u043b\u044c <code>nanoid<\/code>. &nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 6. \u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 <code>todos<\/code>.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>components<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0430\u043c \u0444\u0430\u0439\u043b <code>AddTodo.js<\/code>. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435.&nbsp;<\/p>\n\n\n\n<p>\u0412 <code>components\/AddTodo.js<\/code> \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useForm, Controller } from \"react-hook-form\";<br>import { useStoreActions } from \"easy-peasy\";<br>import { Input } from \"antd\";<br><br>export default function AddTodo() {<br>  const addTodo = useStoreActions((state) =&gt; state.todoModel.addTodo);<br>  const { handleSubmit, control, reset } = useForm();<br>  const onSubmit = (data) =&gt; {<br>    addTodo(data);<br>    reset(); \/\/empty the contents of the textbox<br>  };<br>  return (<br>    &lt;form onSubmit={handleSubmit(onSubmit)}&gt;<br>      &lt;Controller<br>        name=\"task\"<br>        control={control}<br>        defaultValue=\"\"<br>        render={({ field }) =&gt; &lt;Input autoComplete=\"off\" {...field} \/&gt;}<br>      \/&gt;<br>      &lt;input type=\"submit\" value=\"Add\" \/&gt;<br>    &lt;\/form&gt;<br>  );<br>}<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 6. \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>addTodo<\/code> \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 13. \u041c\u0435\u0442\u043e\u0434 <code>onSubmit<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0444\u043e\u0440\u043c\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>addTodo<\/code>, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0447\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0438 14\u201319. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Controller<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>AddTodo<\/code> \u0432 DOM. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 <code>App.js<\/code> \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u0431\u043b\u043e\u043a <code>return<\/code> \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>return (<br>  &lt;div className=\"App\"&gt;<br>    &lt;StoreProvider store={store}&gt;<br>      &lt;AddTodo \/&gt;<br>      &lt;TodoList \/&gt;<br>    &lt;\/StoreProvider&gt;<br>  &lt;\/div&gt;<br>);<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 4. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c <code>AddTodo<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>StoreProvider<\/code>. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c <code>AddTodo<\/code> \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0443.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u0434 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn-images-1.medium.com\/max\/1000\/0*R9-WnJDQmAM6v5pc.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h4 id=\"h--9\"><strong>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430&nbsp;\u0434\u0435\u043b&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430&nbsp;<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 <code>store\/todoStore.js<\/code> \u0438 \u0432\u043d\u043e\u0441\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const todoModel = { \/\/\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u0442\u0430\u043d\u0435\u0442 \u0447\u0430\u0441\u0442\u044c\u044e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430. <br>  removeTodo: action((state, id) =&gt; {<br>    state.todos = state.todos.filter((todo) =&gt; todo.id !== id);<br>  }),<br>  \/\/\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u043a\u043e\u0434...<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 2. \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 <code>removeTodo<\/code>.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 3. \u041f\u0440\u043e\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0438\u0441\u043a \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0433\u043e.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432\u0441\u0435 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438!&nbsp;<\/p>\n\n\n\n<p>\u041d\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 <code>components\/TodoItem.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {Button} from \"antd\"<br><br>const removeTodo = useStoreActions((state) =&gt; state.todoModel.removeTodo);<br>return (<br>  &lt;&gt;<br>    &lt;List.Item<br>      actions={&#91;&lt;Button type=\"primary\" danger onClick={() =&gt; removeTodo(todo.id)}&gt; Delete&lt;\/Button&gt;]}<br>    &gt;<br>      &lt;Text&gt; {todo.task} &lt;\/Text&gt;<br>    &lt;\/List.Item&gt;<br>  &lt;\/&gt;<br>);<br>\/\/\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u043a\u043e\u0434..<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 3. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>removeTodo<\/code> \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 7. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>actions<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0430. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>Button<\/code>. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>removeTodo<\/code>, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044e \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn-images-1.medium.com\/max\/1000\/0*u8S6cS3dRokPbKGT.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h4 id=\"h--10\"><strong>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432&nbsp;<\/strong><\/h4>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u043a\u0440\u0430\u0442\u0446\u0435, \u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u200a\u2014\u200a \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0438\u043c\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u0434\u0430\u0447 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0434\u0435\u043b.&nbsp;<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 <code>store\/todoStore.js<\/code>, \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0442\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>todoModel<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>numberOfItems<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { computed } from \"easy-peasy\";<br><br>const todoModel = { \/\/numberOfItems \u0441\u0442\u0430\u043d\u0435\u0442 \u0447\u0430\u0441\u0442\u044c\u044e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430. <br>  numberOfItems: computed((state) =&gt; state.todos.length),<br>  \/\/\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u043a\u043e\u0434...<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 4. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>numberOfItems<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043e \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <code>todos<\/code>. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0434\u043b\u0438\u043d\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>todos<\/code> \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u0435 <code>numberOfItems<\/code>&nbsp;.<\/li><\/ul>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435! \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 <code>components\/TodoList.js<\/code> \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u043a\u043e\u0434\u0430:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const { Title } = Typography;<br><br>const numberOfItems = useStoreState((state) =&gt; state.todoModel.numberOfItems);<br>return (<br>  &lt;div&gt;<br>    &lt;Title level={3}&gt; Number of items: {numberOfItems}&lt;\/Title&gt;<br>    {\/*Further code..*\/}<br>  &lt;\/div&gt;<br>);<\/code><\/pre>\n\n\n\n<ul><li>\u0421\u0442\u0440\u043e\u043a\u0430 3. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>numberOfItems<\/code> \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.&nbsp;<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0430 6. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>numberOfItems<\/code> \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.&nbsp;<\/li><\/ul>\n\n\n\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn-images-1.medium.com\/max\/1000\/0*4d2b8TW-XyOGANsv.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0426\u0435\u043b\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u0430!&nbsp;<\/p>\n\n\n\n<h3 id=\"h--11\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b&nbsp;<\/h3>\n\n\n\n<p><a href=\"https:\/\/codesandbox.io\/s\/easy-peasy-to-do-tutorial-jzow7\" rel=\"noreferrer noopener\" target=\"_blank\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 CodeSandbox \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.&nbsp;<\/a><\/p>\n\n\n\n<h3 id=\"h--12\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435&nbsp;<\/h3>\n\n\n\n<p>\u0418\u0437 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Easy Peasy \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u0430 \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u043a\u0430\u043a \u043d\u0435\u043b\u044c\u0437\u044f \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f Easy Peasy \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f-\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0438 \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u043d\u0430\u0448\u0443 \u0436\u0438\u0437\u043d\u044c. \u041e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u043d\u0430\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u043b\u0430 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043d\u044f.&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2337"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2337"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2337\/revisions"}],"predecessor-version":[{"id":2338,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2337\/revisions\/2338"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}