{"id":392109,"date":"2024-06-29T10:13:39","date_gmt":"2024-06-29T10:13:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=392109"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=392109","title":{"rendered":"Teaful \u2014 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u0430\u044f, \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043c\u043e\u0449\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 React<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figcaption><\/figure>\n

\u0421\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 React \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e. \u0418\u0437-\u0437\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0430\u0432\u0442\u043e\u0440 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 React Context, \u043d\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. <\/p>\n

\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Teaful, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c Fragmented store, \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0430 \u041a\u0414\u041f\u0412. \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e Teaful, \u043f\u043e\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448 \u043a\u0443\u0440\u0441 \u043f\u043e Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Python<\/a>.<\/p>\n\n

\"\u041d\u0435\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435
\u041d\u0435\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 React Context<\/figcaption><\/figure>\n

\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 fragmented-store<\/h2>\n

Fragmented-store \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 store \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0439 store, \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0437\u0430\u043d\u043e\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u0435\u0439.<\/p>\n

\"Fragmented-store
Fragmented-store \u0432 React Context<\/figcaption><\/figure>\n

\u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React Context, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f store, \u0430 \u044d\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e.<\/p>\n

\/\/ \u274c  Not recommended <UsernameProvider>   <AgeProvider>     {children}   <\/AgeProvider> <\/UsernameProvider><\/code><\/pre>\n
\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0435\u0439 \u043c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0441\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u0438\u043a\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u041f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 500 \u0431\u0430\u0439\u0442\u00a0\u2014 fragmented-store.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Provider<\/h3>\n
\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c store \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0432\u043d\u0430\u0447\u0430\u043b\u0435. \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0441 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c React Context:<\/p>\n
import createStore from \"fragmented-store\";  \/\/ It is advisable to set all the fields. If you don't know the  \/\/ initial value you can set it to undefined or null to be able  \/\/ to consume the values in the same way const { Provider } = createStore({   username: \"Aral\",   age: 31, });  function App() {   return (     <Provider>      {\/* rest *\/}      <\/Provider>   ); } <\/code><\/pre>\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0434\u043d\u043e \u043f\u043e\u043b\u0435<\/h3>\n
\u041d\u0430\u043f\u0438\u0448\u0435\u043c 2 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0441 \u043f\u043e\u043b\u0435\u043c store \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 useState<\/code> \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c. \u041d\u043e \u0437\u0434\u0435\u0441\u044c \u043e\u043d\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c:<\/p>\n
import createStore from \"fragmented-store\";  \/\/ We can import hooks with the property name in camelCase. \/\/ username -> useUsername \/\/ age -> useAge const { Provider, useUsername, useAge } = createStore({   username: \"Aral\",   age: 31, });  function App() {   return (     <Provider>      <UsernameComponent \/>      <AgeComponent \/>      <\/Provider>   ); }  \/\/ Consume the \"username\" field function UsernameComponent() {   const [username, setUsername] = useUsername();   return (     <button onClick={() => setUsername(\"AnotherUserName\")}>       Update {username}     <\/button>   ); }  \/\/ Consume the \"age\" field function AgeComponent() {   const [age, setAge] = useAge();   return (     <div>       <div>{age}<\/div>       <button onClick={() => setAge((s) => s + 1)}>Inc age<\/button>     <\/div>   ); }<\/code><\/pre>\n
\u041a\u043e\u0433\u0434\u0430 AgeComponent<\/code> \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0435 age<\/code>, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e AgeComponent<\/code>, \u0430 UsernameComponent<\/code> \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0443 \u0436\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c store \u0438 \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0435\u0441\u044c store<\/h3>\n
\u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0439? \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441\u0440\u0430\u0437\u0443 \u0432\u0435\u0441\u044c store. \u041e\u043d \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f:<\/p>\n
import createStore from \"fragmented-store\";  \/\/ Special hook useStore const { Provider, useStore } = createStore({   username: \"Aral\",   age: 31, });  function App() {   return (     <Provider>      <AllStoreComponent \/>     <\/Provider>   ); }  \/\/ Consume all fields of the store function AllStoreComponent() {   const [store, update] = useStore();    console.log({ store }); \/\/ all store    function onClick() {     update({ age: 32, username: \"Aral Roca\" })   }    return (     <button onClick={onClick}>Modify store<\/button>   ); }<\/code><\/pre>\n
\u0415\u0441\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044f, \u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u0441 \u043d\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b, \u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438 \u2014 \u043d\u0435\u0442:<\/p>\n
\/\/ It only updates the \"username\" field, other fields won't be updated \/\/ The UsernameComponent is going to be re-rendered while AgeComponent won't :) update({ username: \"Aral Roca\" }) <\/code><\/pre>\n
\u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c:<\/p>\n
update(s => ({ ...s, username: \"Aral\" }))<\/code><\/pre>\n
\u0422\u0430\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u043e\u043b\u0435\u043c username<\/code>\u00a0 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0445\u0443\u043a useUsername<\/code>.<\/p>\n
\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n
\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 fragmented-store<\/a> \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u043e\u0447\u0435\u043d\u044c <\/a>\u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0444\u0430\u0439\u043b. \u0412\u044b \u043d\u0435 \u043f\u0438\u0448\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u044b React Context \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438:<\/p>\n
\n\u041f\u0440\u0438\u043c\u0435\u0440<\/summary>\n
\n
import React, { useState, useContext, createContext } from 'react'  export default function createStore(store = {}) {   const keys = Object.keys(store)   const capitalize = (k) => `${k[0].toUpperCase()}${k.slice(1, k.length)}`    \/\/ storeUtils is the object we'll return with everything   \/\/ (Provider, hooks)   \/\/   \/\/ We initialize it by creating a context for each property and   \/\/ returning a hook to consume the context of each property   const storeUtils = keys.reduce((o, key) => {     const context = createContext(store[key]) \/\/ Property context     const keyCapitalized = capitalize(key)      if (keyCapitalized === 'Store') {       console.error(         'Avoid to use the \"store\" name at the first level, it\\'s reserved for the \"useStore\" hook.'       )     }      return {       ...o,       \/\/ All contexts       contexts: [...(o.contexts || []), { context, key }],       \/\/ Hook to consume the property context       [`use${keyCapitalized}`]: () => useContext(context),     }   }, {})    \/\/ We create the main provider by wrapping all the providers   storeUtils.Provider = ({ children }) => {     const Empty = ({ children }) => children     const Component = storeUtils.contexts       .map(({ context, key }) => ({ children }) => {         const ctx = useState(store[key])         return <context.Provider value={ctx}>{children}<\/context.Provider>       })       .reduce(         (RestProviders, Provider) =>           ({ children }) =>             (               <Provider>                 <RestProviders>{children}<\/RestProviders>               <\/Provider>             ),         Empty       )      return <Component>{children}<\/Component>   }    \/\/ As a bonus, we create the useStore hook to return all the   \/\/ state. Also to return an updater that uses all the created hooks at   \/\/ the same time   storeUtils.useStore = () => {     const state = {}     const updates = {}     keys.forEach((k) => {       const [s, u] = storeUtils[`use${capitalize(k)}`]()       state[k] = s       updates[k] = u     })      function updater(newState) {       const s =         typeof newState === 'function' ? newState(state) : newState || {}       Object.keys(s).forEach((k) => updates[k] && updates[k](s[k]))     }      return [state, updater]   }    \/\/ Return everything we've generated   return storeUtils }<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0414\u0435\u043c\u043e<\/h2>\n
\u0427\u0442\u043e\u0431\u044b \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442,\u044f  \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443. \u0412 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b conosle.log, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n
<\/div>\n
\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n
\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e fragmented-store \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 React Context \u0438 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n
\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 fragmented-store \u043f\u043e\u043a\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u043b\u0438\u0448\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442\u0441\u044f \u043b\u044e\u0431\u044b\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043d\u0430 GitHub.<\/p>\n\n
Teaful: \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u043e\u0435, \u043b\u0451\u0433\u043a\u043e\u0435 \u0438 \u043c\u043e\u0449\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043d\u0430 React<\/h2>\n
\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b<\/em><\/a> \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/em><\/p>\n
\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b\u0438 fragmented-store<\/a> \u2014 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u043c\u0435\u043d\u044c\u0448\u0435, \u043f\u0440\u043e\u0449\u0435, \u043c\u043e\u0449\u043d\u0435\u0435 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Teaful<\/strong>. \u0421 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0442\u0430\u043a:<\/p>\n