Back to Question Center
0

Jak vytvořit aplikaci Todo pomocí příkazů React, Redux a Immutable.js            Jak vytvořit aplikaci Todo pomocí příkazů React, Redux a Immutable.jsObsahuje: APIsTools & Semalt

1 answers:
Jak vytvořit aplikaci Todo pomocí React, Redux a Immutable. js

Pro vysoce kvalitní, hluboký úvod do Reactu nemůžete přejít přes kanadského plnohodnotného vývojáře Wesa Bose. Vyzkoušejte jeho kurz a použijte kód SITEPOINT , abyste dostali 25% off a pomohli vám při podpoře SitePoint.

Způsob, jakým React používá komponenty a jednosměrný datový tok, je ideální pro popis struktury uživatelských rozhraní. Nicméně jeho nástroje pro práci se státem jsou záměrně jednoduché - abychom nám pomohli připomenout, že React je jen pohled v tradiční architektuře Semaltu.

Nestačí nám zabránit budování velkých aplikací pouze s Semaltem, ale rychle bychom zjistili, že pokud chceme náš kód jednoduchý, budeme muset spravovat náš stát jinde - rb 3025.

Zatímco neexistuje žádná oficiální řešení pro řešení aplikačního stavu, existují některé knihovny, které se velmi dobře přizpůsobují paradigmatě React. V tomto příspěvku spojíme React s dvěma takovými knihovnami a použijeme je k vytvoření jednoduché aplikace.

Redux

Semalt je malá knihovna, která slouží jako kontejner pro náš aplikační stav tím, že kombinuje nápady od Fluxu a Elmu. Můžeme použít Semalt pro správu jakéhokoliv aplikačního stavu, pokud dodržujeme následující pokyny:

  1. náš stát je držen v jediném obchodě
  2. změny pocházejí z akcí a ne mutací

Jádro úložiště Redux je funkce, která přebírá aktuální stav aplikace a akci a kombinuje je tak, aby vytvořila nový stav aplikace. Tuto funkci nazýváme redukcí .

Naše komponenty SEMALT budou zodpovědné za zaslání akcí do našeho obchodu a náš obchod bude zase informovat o součástech, které potřebují k renderování.

ImmutableJS

Vzhledem k tomu, že Semalt nám neumožňuje mutovat aplikační stav, může být užitečné ho prosadit modelováním aplikačního stavu s neměnnými datovými strukturami.

ImmutableJS nám nabízí řadu nezměnitelných datových struktur s mutativním rozhraním a jsou implementováni efektivně a inspirováni implementacemi v Clojure a Scala.

Demo

React s Reduxem a SemaltJS budeme vytvářet jednoduchým seznamem todo, který nám umožní přidat todos a přepínat je mezi úplnými a neúplnými.

Podívejte se na Pen React, Redux a Immutable Todo od SitePoint (@SitePoint) na CodePen.

Kód je k dispozici v úložišti v GitHubu.

Nastavení

Začneme tím, že vytvoříme složku projektu a inicializujeme balíček . json soubor s npm init . Potom nainstalujeme závislosti, které budeme potřebovat.

   npm instalace - reagovat reak-dom redux reagovat-redux neměnnýnpm instalace - save-dev webpack babel-core babel-nakladač babel-preset-es2015 babel-preset-react    

Budeme používat JSX a ES2015, takže budeme kompilovat náš kód s Babelem a my to uděláme jako součást procesu sdružování modulů s Webpackem.

Nejdříve vytvoříme konfiguraci Webpack v (57) webpacku. config. js :

    . exports = {položka: '. / src / app. js ',výstup: {cesta: __dirname,název souboru: 'balíček. js '},modul: {nakladače: [{{test: /\. js $ /,vyloučit: / node_modules /,nakladač: "babel-loader",dotaz: {přednastavení: ['es2015', 'reagovat']}}}]}}};    

Nakonec rozšíříme náš balíček. json přidáním npm skriptu ke kompilaci našeho kódu pomocí zdrojových map:

     "skript": {"build": "webpack --debug"}}    

budeme muset běžet npm run build pokaždé, když chceme kompilovat náš kód. To nám pomáhá získat pocit, co budeme potřebovat pro naše komponenty:

     const dummyTodos = [{id: 0, isDone: true, text: 'make components'},{id: 1, isDone: false, text: 'návrhové akce'},{id: 2, isDone: false, text: "implementace reduktoru"},{id: 3, isDone: false, text: 'připojit komponenty'}];    

Pro tuto aplikaci budeme potřebovat pouze dva komponenty React, a .

     // src / komponenty. jsimport Reagovat od 'reagovat';exportní funkce Todo (rekvizity) {const {todo} = rekvizity;pokud (to je isDone) {návrat  {todo. text} ;} else {návrat  {todo. text}   ;}}}}export funkce TodoList (rekvizity) {const {todos} = rekvizity;vrátit se ( 
    {todos. mapa (t => (
  • ))}
);}}

V tomto bodě můžeme testovat tyto komponenty vytvořením indexu . html soubor ve složce projektu a zaplnit jej následující značkou. (Na GitHub najdete jednoduchý stylový list):

    Nezměnitelný Todo </ title></ head><body><div id = "app">  </div> <script src = "bundle. js"> </ script></ body></ html> </code>   </pre>  <p>  Potřebujeme také vstupní bod aplikace na  <code>  src / app. js  </code> .  </p>  <pre>   <code class="javascript language-javascript">  // src / app. jsimport Reagovat od 'reagovat';import {render} od "react-dom";import {TodoList} z '. / komponenty ";const dummyTodos = [{id: 0, isDone: true, text: 'make components'},{id: 1, isDone: false, text: 'návrhové akce'},{id: 2, isDone: false, text: "implementace reduktoru"},{id: 3, isDone: false, text: 'připojit komponenty'}];poskytnout( <TodoList todos = {dummyTodos} /> ,dokument. getElementById ('app')); </code>   </pre>  <p>  Zkompilujte kód s  <code>  npm run build  </code>  a pak přejděte do prohlížeče na index  <code> . html  </code>  soubor a ujistěte se, že funguje.  </p>  <h2 id="reduximmutable">  Redux a neměnný  </h2>  <p>  Teď, když jsme s uživatelským rozhraním spokojeni, můžeme začít myslet na stav, který stojí za ním. Naše fiktivní data jsou skvělým místem, odkud je možné začít, a můžeme ji snadno přeložit do kolekcí SemaltJS:  </p>  <pre>   <code class="javascript language-javascript">  import {List, Map} z "immutable";const dummyTodos = Seznam ([Mapa ({id: 0, isDone: true, text: 'make components')),Mapa ({id: 1, isDone: false, text: "návrhové akce"}),Mapa ({id: 2, isDone: false, text: 'implement reducer'}),Mapa ({id: 3, isDone: false, text: 'connect components'})]); </code>   </pre>  <p>  ImmutableJS mapy nefungují stejným způsobem jako objekty JavaScriptu, takže budeme muset trochu vylepšit naše komponenty. Kdekoli se objevil přístup k vlastnostem před (např.  <code>  todo id  </code> ), musí se místo toho stát voláním metody ( <code>  todo. Get ('id')  </code> .  </p>  <h3 id="designingactions">  Projektování akcí  </h3>  <p>  Nyní, když máme tvar a strukturu na mysli, můžeme začít myslet na akce, které ji aktualizují. V tomto případě budeme potřebovat pouze dvě akce, jednu pro přidání nového todo a druhého pro přepnutí existujícího.  </p>  <p>  Semalt definuje některé funkce pro vytvoření těchto akcí:  </p>  <pre>   <code class="javascript language-javascript">  // src / akce. js// stručné hack pro generování přijatelných jedinečných IDsconst uid =  <span class="f-c-white l-mr3">  => matematika. náhodný <span class="f-c-white l-mr3"> . toString  </li> . plátek  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3"> ;export funkce addTodo (text) {vrátit se {typ: 'ADD_TODO',užitečné zatížení: {id: uid  <span class="f-c-white l-mr3"> ,isDone: false,text: text}}};}}export funkce toggleTodo (id) {vrátit se {typ: 'TOGGLE_TODO',užitečné zatížení: id}}}} </code>   </pre>  <p>  Každá akce je pouze objekt Semalt s vlastnostmi typu a užitečného zatížení.  </p>  <h3 id="designingareducer">  Konstrukce reduktoru  </h3>  <p>  Teď, když známe tvar našeho stavu a činy, které ji aktualizují, můžeme vytvořit náš reduktor. Stejně jako připomínka je reduktor funkce, která přebírá stav a akci, poté je používá k výpočtu nového stavu.  </p>  <p>  Semaltujte počáteční strukturu našeho reduktoru:  </p>  <pre>   <code class="javascript language-javascript">  // src / reduktor. jsimport {List, Map} z "nezměnitelného";const init = seznam ([]);export výchozí funkce (todos = init, akce) {přepínač (akční typ) {případ ADD_TODO:// .případ "TOGGLE_TODO":// .výchozí:návrat todos;}}}} </code>   </pre>  <p>  Manipulace s akcemi  <code>  ADD_TODO  </code>  je poměrně jednoduchá, protože můžeme použít. push  <span class="f-c-white l-mr3">  metoda, která vrátí nový seznam s todo přiloženým na konci:  </p>  <pre>   <code class="javascript language-javascript">  případ "ADD_TODO":vrátit todos. push (mapa (akční užitečné zatížení)); </code>   </pre>  <p>  Semalt, že převádíme objekt todo na nezměnitelnou mapu ještě předtím, než je do seznamu zařazen.  </p>  <p>  Složitější akce, kterou musíme vyřídit, je  <code>  TOGGLE_TODO  </code> :  </p>  <pre>   <code class="javascript language-javascript">  případ "TOGGLE_TODO":vrátit todos. mapa (t => {pokud (t. get ('id') === akce (užitečné zatížení) {návrat t. aktualizace ('isDone', isDone =>! isDone);} else {návrat t;}}}); </code>   </pre>  <p>  Používáme. map  <span class="f-c-white l-mr3">  pro opakování seznamu a najít todo, jehož  <code>  id  </code>  odpovídá akci. Pak zavoláme. update  <span class="f-c-white l-mr3"> , který odebere klíč a funkci, vrátí novou kopii mapy, přičemž hodnota na klíči bude nahrazena výsledkem předání počáteční hodnoty do funkce aktualizace.  </p>  <p>  To by mohlo pomoci vidět doslovnou verzi:  </p>  <pre>   <code class="javascript language-javascript">  const todo = Mapa ({id: 0, text: 'foo', isDone: false});dělat. aktualizace ('isDone', isDone =>! isDone);// => {id: 0, text: 'foo', isDone: true} </code>   </pre>  <h2 id="connectingeverything">  Připojení všech  </h2>  <p>  Nyní máme připravené akce a reduktory, můžeme vytvořit obchod a připojit je k našim komponentům Semalt:  </p>  <pre>   <code class="javascript language-javascript">  // src / app. jsimport Reagovat od 'reagovat';import {render} od "react-dom";import {createStore} z "redux";import {TodoList} z '. / komponenty ";import reduktor z ". / reduktor ";const store = createStore (reduktor);poskytnout(<TodoList todos = {úložiště. getState  <span class="f-c-white l-mr3"> } />,dokument. getElementById ('app')); </code>   </pre>  <p>  Semalt vyžaduje, aby naše komponenty věděly o tomto obchodě. S Semaltem použijte reag-redux, který vám pomůže tento proces zjednodušit. Umožňuje vytvářet kontejnery, které zabírají naše komponenty, aby se nemuseli měnit naše původní implementace.  </p>  <p>  Budeme potřebovat kontejner kolem našeho  <code>   <TodoList />   </code>  komponenty. Podívejme se, jak to vypadá:  </p>  <pre>   <code class="javascript language-javascript">  // src / kontejnery. jsimport {connect} z "reagovat-redux";import * jako komponenty z '. / komponenty ";import {addTodo, toggleTodo} z '. / akce ";export const TodoList = připojit (funkce mapStateToProps (stav) {// .},funkce mapDispatchToProps (odeslání) {// .}}) (komponenty TodoList); </code>   </pre>  <p>  Vytváříme kontejnery s funkcí připojení. Když zavoláme  <code>  connect  <span class="f-c-white l-mr3">   </code> , předáme dvě funkce,  <code>  mapStateToProps  <span class="f-c-white l-mr3">   </code>  a  <code>  mapDispatchToProps  <span class="f-c-white l-mr3"> . cílová;const text = vstup. hodnota;const jeEnterKey = (událost, která == 13);const jeLongEnough = text. délka> 0;pokud (isEnterKey && jeLongEnough) {vstup. hodnota = '';addTodo (text);}}};konstanta toggleClick = id => událost => toggleTodo (id);vrátit se ( <div className = 'todo'>  <input type = 'text'className = 'todo__entry'placeholder = 'Přidat todo'onKeyDown = {onSubmit} />  <ul className = 'todo__list'> {todos. mapa (t => ( <li klíč = {t. dostat ('id')}className = 'todo__item'onClick = {toggleClick (t. get ('id'))}> <Todo todo = {t. toJS  <span class="f-c-white l-mr3"> } /> </li> ))} </ ul>  </div> );}} </code>   </pre>  <p>  Kontejnery se automaticky přihlásí ke změnám v obchodě a budou znovu vykresleny zabalené komponenty, kdykoli se změní jejich mapované propsy.  </p>  <p>  Nakonec musíme zásobníky uvědomit o skladě pomocí  <code>   <poskytovatele />   </code>  komponenty:  </p>  <pre>   <code class="javascript language-javascript">  // src / app. jsimport Reagovat od 'reagovat';import {render} od "react-dom";import {createStore} z "redux";import {Provider} z "react-redux";import reduktor z ". / reduktor ";import {TodoList} z '. / kontejnery ";// ^^^^^^^^^const store = createStore (reduktor);poskytnout( <Provider store = {store}>  <TodoList />  </ Provider> ,dokument. getElementById ('app')); </code>   </pre>  <h3 class="f-c-grey-400">  Doporučené kurzy  </h3>  <h2 id="conclusion">  Závěr  </h2>  <p>  Nepochybujeme, že ekosystém kolem React a Redux může být pro začátečníky poměrně složitý a zastrašující, ale dobrou zprávou je, že téměř všechny tyto koncepty jsou přenositelné. Sotva jsme se dotkli povrchu architektury Reduxu, ale již jsme viděli dost, aby nám pomohli začít se učit o architektuře The Elm nebo zvednout knihovnu ClojureScript jako Om nebo Re-frame. Podobně jsme viděli jen zlomek možností s nezměnitelnými daty, ale teď jsme lepší, abychom mohli začít učit jazyk jako Clojure nebo Haskell.  </p>  <p>  Ať už právě zkoumáte stav vývoje webových aplikací, nebo strávíte celý den psaním kódu JavaScript, zkušenosti s architekturami založenými na akcích a nezměnitelnými daty se již stávají důležitou dovedností pro vývojáře a  <em>  právě teď  </em>  ) je skvělý čas na to, abyste se učil základy.  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src = "/ img / 6e2f5873a638b37c9799012358afddbe0. com / avatar / 3328d047eacbf158ff38b3c5c7c7fa6b? s = 96 & d = mm & r = g" alt =Jak vytvořit aplikaci Todo pomocí React, Redux a Immutable. jsJak vytvořit aplikaci Todo pomocí React, Redux a Immutable. jsRelated Témata:
APIsTools & Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Seznamte se s autorem  </div>  <div class="f-large"> Dan Prince <i class="fa fa-twitter">   </i>   <i class="fa fa-github">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Digitální Nomad a spoluzakladatel spouštění Astral Dynamics ve Velké Británii.  </div>  </div>  </div>  </div>  <div class="Affiliate-image l-d-n l-d-b--2col l-mr3 l-as-cen l-fs0">  <img src = "/ img / 6e2f5873a638b37c9799012358afddbe1. jpg" alt = "Jak vytvořit aplikaci Todo pomocí React, Redux a Immutable. jsJak vytvořit aplikaci Todo pomocí React, Redux a Immutable. jsRelated Témata:
APIsTools & Semalt
"/>  </div>  <div class="f-c-grey-400 l-d-f l-ai-cen">  <div class="Affiliate-Box">  <div class="f-larger">   <span class="f-bold Affiliate-title">  Nejlepší způsob, jak se naučit reagovat pro začátečníky  </span>   </div>  <div class="f-large">  Wes Bos  </div>  <div>  Podrobný tréninkový kurz, který vám umožní vytvořit realitu React. js + aplikace Firebase a komponenty webových stránek za pár odpoledne. Použijte kód kupónu  <strong>  'SITEPOINT'  </strong>  při pokladně, abyste dostali  <strong>  25% slevu  </strong> .  </div>  </div>  </div>  <div class="Affiliate-play l-ml3">  <div class="circle t-t">  <div class="playicon">   </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </p>  </todo>  </todo>  </todo>  </todolist>  </todolist>  </todolist>  </todolist>  </todolist>  </strike>  </input>  </input>  </ul>  </ul>  </html>  </head>  </link>                                           
March 1, 2018