Back to Question Center
0

Miten rakentaa Todo App käyttäen React, Redux ja Immutable.js            Kuinka rakentaa Todo-sovellus käyttämällä React, Redux ja Immutable.jsRelated Aiheet: APIsTools & Semalt

1 answers:
Miten rakentaa Todo App käyttäen React, Redux ja muuttumaton. js

Reactin laadukkaan ja syvällisen käyttöönoton lisäksi et voi ohittaa kanadalaista täyspinoa kehittäjä Wes Bosia. Kokeile kurssia täällä ja käytä koodia SITEPOINT saadaksesi 25% pois ja avustamaan SitePointia - fiches de paie gratuite.

Reactin käyttämät komponentit ja yksisuuntainen tietovirta tekevät siitä ihanteellisen kuvaamaan käyttöliittymien rakennetta. Sen työkaluja valtion työskentelyyn pidetään kuitenkin tarkoituksella yksinkertaisina - muistuttamaan meitä siitä, että React on vain perinteisen Semalt -arkkitehtuurin näkymä.

Mikään ei estä meitä rakentamasta suuria sovelluksia vain Semaltilla, mutta havaitsimme nopeasti, että jotta koodi olisi yksinkertainen, meidän olisi hallittava valtiota muualla.

Vaikka käytettävissä ei ole virallista ratkaisua sovellustilan käsittelyyn, on olemassa joitakin kirjastoja, jotka sopivat erityisen hyvin Reactin paradigmaan. Tässä viestissä pariskumppaamme Reactin kanssa kahdella tällaisella kirjastolla ja käytämme niitä rakentamaan yksinkertainen sovellus.

Redux

Semalt on pienikokoinen kirjasto, joka toimii sovellusvaltion säiliöksi yhdistämällä ideoita Fluxista ja Elmistä. Voimme käyttää Semaltia hallitsemaan minkä tahansa sovellustilan, jos noudatamme seuraavia ohjeita:

  1. valtioamme pidetään yhtenäisessä myymälässä
  2. muutokset tulevat toimista ja ei mutaatioista

Redux-myymälän ydin on toiminto, joka ottaa nykyisen sovellustilan ja toiminnan ja yhdistää ne uuden sovellustilan luomiseksi. Tätä toimintoa kutsutaan vähennysventtiiliksi .

Semalt -komponentimme ovat vastuussa lähettämisestä myymälöissämme ja puolestaan ​​myymälä kertoo komponentit, kun ne on tehtävä uudelleen.

ImmutableJS

Koska Semalt ei salli muokata sovellustilaa, voi olla hyödyllistä panna se täytäntöön mallinnettaessa sovellustilaa muuttumattomilla tietorakenteilla.

ImmutableJS tarjoaa meille monia muuttumattomia datarakenteita, joilla on mutanttiset rajapinnat, ja ne toteutetaan tehokkaalla tavalla, joka on innoitettu Clojure- ja Scala-toteutuksissa.

Demo

Käytämme Reactia Reduxin ja SemaltJS: n kanssa rakentaaksemme yksinkertaisen todo-luettelon, jonka avulla voimme lisätä todoksen ja vaihtaa niiden välillä täydellisiä ja epätäydellisiä.

Kokeile PenPact, Redux & Immutable Todo sivustolla SitePoint (@SitePoint) CodePenista.

Koodi on saatavilla GitHubin arkistossa.

Asennus

Aloitamme luomalla projektikansio ja alustat -paketin. json -tiedosto npm init . Sitten asennamme riippuvuudet, joita tarvitsemme.

   npm install --save reagoivat reaktion-dom redux reagoivat-redux immutablenpm asenna --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react    

Käytämme JSX: tä ja ES2015: tä, joten koodimme koodin Babelin kanssa, ja aiomme tehdä tämän osana moduulin niputusprosessia Webpackin kanssa.

Ensin luodaan Webpackin kokoonpano webpaketissa. config. js :

     moduuli. vienti = {merkintä: ". / Src / sovelluksen. js',tuotos: {polku: __dirname,tiedostonimi: "bundle. js'},moduuli: {kuormaajat: [{testi: / \. js $ /,sulje pois: / node_modules /,loader: 'babel-loader',kysely: {esiasetukset: ['es2015', 'reagoivat']}}]}};    

Lopuksi pidennämme pakettia. json lisäämällä npm-komentosarja koodin kääntämiseen lähdekarttojen kanssa:

     "käsikirjoitus": {"rakentaa": "webpack --debug"}    

Meidän on suoritettava npm run build aina, kun haluamme kääntää koodimme. Tämä auttaa meitä tuntemaan, mihin tarvitsemme komponentit tekemään:

     const dummyTodos = [{id: 0, isDone: true, teksti: "tee komponentit"},{id: 1, isDone: false, teksti: "design actions"},{id: 2, isDone: false, teksti: "implement reducer"},{id: 3, isDone: false, teksti: 'liitä komponentit'}];    

Tätä sovellusta tarvitsemme vain kaksi React-komponenttia, ja .

     // src / komponentit. jstuonti Reagoi "reagoi";vientitoiminto Todo (rekvisiitta) {const {todo} = rekvisiitta;jos (todo. isDone) {return  {todo. text} ;} else {palaa  {todo. teksti}   ;}}vientitoiminto TodoList (rekvisiitta) {const {todos} = rekvisiitta;palautus ( 
    {Todos. kartta (t => (
  • ))}
);}

Tässä vaiheessa voimme testata näitä komponentteja luomalla indeksi. html -tiedostoa projektikansioon ja täyttämällä se seuraavalla merkinnällä. (GitHubissa on yksinkertainen tyylitaulukko):

    Immutable Todo </ title></ Head><Body><div id = "app">  </div> <script src = "bundle. js"> </ script></ Body></ Html> </code>   </pre>  <p>  Tarvitsemme myös hakemuksen sisääntulopisteen kohdassa  <code>  src / app. js  </code> .  </p>  <pre>   <code class="javascript language-javascript">  // src / app. jstuonti Reagoi "reagoi";tuonti {render} kohteesta "react-dom";tuoda {TodoList} kohteesta '. / Komponenttien;const dummyTodos = [{id: 0, isDone: true, teksti: "tee komponentit"},{id: 1, isDone: false, teksti: "design actions"},{id: 2, isDone: false, teksti: "implement reducer"},{id: 3, isDone: false, teksti: 'liitä komponentit'}];tehdä ( <TodoList todos = {dummyTodos} /> asiakirja. getElementById (sovelluspikakuvakkeen)); </code>   </pre>  <p>  Käännä koodi koodilla  <code>  npm run build  </code>  ja selaa sitten selaimesi  <code>  indeksiin. html  </code>  tiedosto ja varmista, että se toimii.  </p>  <h2 id="reduximmutable">  Redux ja muuttumaton  </h2>  <p>  Nyt kun olemme tyytyväisiä käyttöliittymään, voimme alkaa miettiä sen takana olevaa tilannetta. Meidän hahmosi tiedot ovat hyvä paikka aloittaa, ja voimme helposti kääntää sen SemaltJS kokoelmille:  </p>  <pre>   <code class="javascript language-javascript">  tuonti {lista, kartta} 'muuttumattomasta';const dummyTodos = Luettelo ([Kartta ({id: 0, isDone: true, teksti: 'tee komponentit'}),Kartta ({id: 1, isDone: false, teksti: "design actions"}),Kartta ({id: 2, isDone: false, teksti: "toteuttaa vähentäjä"})Kartta ({id: 3, isDone: false, teksti: 'liitä komponentit'})]); </code>   </pre>  <p>  ImmutableJS-kartat eivät toimi samalla tavoin kuin JavaScriptin esineitä, joten meidän on tehtävä hieman pienennyksiä komponentteihimme. Missä tahansa missä oli omaisuuden käyttöoikeus ennen (esim.  <code>  todo.id  </code> ) tarvitsisi tulla metodipuhelu sijaan  <code>  todo. Get ('id')  </code> ).  </p>  <h3 id="designingactions">  Suunnittelu  </h3>  <p>  Nyt, kun saamme muodon ja rakenteen selville, voimme alkaa miettiä toimintoja, jotka päivittävät sen. Tällöin tarvitsemme vain kaksi toimintoa: yksi uusi ja toinen, jos haluat vaihtaa olemassa olevan.  </p>  <p>  Semalt määrittelee joitakin toimintoja näiden toimien luomiseksi:  </p>  <pre>   <code class="javascript language-javascript">  // src / toimet. js// suqinct hack generoimaan kelvollisia ainutlaatuisia idsconst uid =  <span class="f-c-white l-mr3">  => Matematiikka. random  <span class="f-c-white l-mr3"> . toString  </li> . viipale  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3"> ;vientitoiminto addTodo (teksti) {paluu {tyyppi: 'ADD_TODO',hyötykuorma: {id: uid  <span class="f-c-white l-mr3"> ,isDone: false,teksti: teksti}};}vientitoiminto toggleTodo (id) {paluu {tyyppi: 'TOGGLE_TODO',hyötykuorma: id}} </code>   </pre>  <p>  Jokainen toiminta on vain Semalt-objekti, jolla on tyyppi ja hyötykuorma.  </p>  <h3 id="designingareducer">  Reduktorin suunnittelu  </h3>  <p>  Nyt kun tunnemme valtion muodon ja sen päivittävät toimet, voimme rakentaa vähennysventtiilijämme. Ainoastaan ​​muistutuksena vähennysventtiili on toiminto, joka ottaa tilan ja toiminnan, sitten käyttää niitä laskemaan uuden valtion.  </p>  <p>  Korjaa vähennyslaitteen alkurakenne:  </p>  <pre>   <code class="javascript language-javascript">  // src / vähennysventtiili. jstuonti {luettelo, kartta} 'muuttumattomasta';const init = Luettele ([]);vienti oletusfunktio (todos = init, toiminta) {kytkin (toiminta-tyyppi) {tapaus "ADD_TODO":// .tapaus "TOGGLE_TODO":// .oletus:paluu todos;}} </code>   </pre>  <code>  ADD_TODO  </code>  käsittely on melko yksinkertainen, koska voimme käyttää sitä. push  <span class="f-c-white l-mr3">  -menetelmä, joka palauttaa uuden luettelon lopussa olevaan todoon:  </p>  <pre>   <code class="javascript language-javascript">  tapaus "ADD_TODO":paluu todos. push (kartta (toiminta, hyötykuorma)); </code>   </pre>  <p>  Epäröi, että myös todo-objekti muutetaan muuttumattomaksi karteksi ennen kuin se työnnetään luetteloon.  </p>  <p>  Monimutkaisempi toiminta, jota meidän on käsiteltävä, on  <code>  TOGGLE_TODO  </code> :  </p>  <pre>   <code class="javascript language-javascript">  tapaus "TOGGLE_TODO":paluu todos. kartta (t => {jos (t. get ('id') === toiminta. hyötykuorma) {paluu t. päivitys ('isDone', isDone =>! isDone);} else {paluu t;}}); </code>   </pre>  <p>  Käytämme. map  <span class="f-c-white l-mr3">  toerata luettelon päälle ja etsi todo, jonka  <code>  id  </code>  vastaa toimenpidettä. Sitten soitamme. update  <span class="f-c-white l-mr3"> , joka ottaa avaimen ja toiminnon, palauttaa uuden kartan kopion, jonka arvo korvataan avaimen arvon siirtämisellä päivitystoimintoon.  </p>  <p>  Se voi auttaa kirjaimellista versiota:  </p>  <pre>   <code class="javascript language-javascript">  const todo = Kartta ({id: 0, teksti: "foo", isDone: false});tehdä. päivitys ('isDone', isDone =>! isDone);// => {id: 0, teksti: 'foo', isDone: true} </code>   </pre>  <h2 id="connectingeverything">  Kaikki  </h2>  <p>  Nyt olemme saaneet toimintaamme ja vähennysventtiilimme valmiiksi, voimme luoda myymälän ja liittää sen Semalt-komponentteihin:  </p>  <pre>   <code class="javascript language-javascript">  // src / app. jstuonti Reagoi "reagoi";tuonti {render} kohteesta "react-dom";tuonti {createStore} kohteesta "redux";tuoda {TodoList} kohteesta '. / Komponenttien;tuonti vähennysventtiilistä ". / Vähennysventtiilillä ";const store = createStore (vähennysventtiilijä);tehdä (<TodoList todos = {myymälä. getState  <span class="f-c-white l-mr3"> } />,asiakirja. getElementById (sovelluspikakuvakkeen)); </code>   </pre>  <p>  Semaltin täytyy tehdä tuotteistamme tietoinen tästä myymälästä. Semalt käyttää reaktiohäiriöitä helpottaakseen prosessin yksinkertaistamista. Sen ansiosta voimme luoda myymälöitä sisältäviä säiliöitä, jotka kiertävät komponentteja, jotta emme tarvitse muuttaa alkuperäisiä toteutustamme.  </p>  <p>  Tarvitsemme kontin  <code>   <TodoList />   </code>  komponentin ympärillä. Katsotaanpa, miltä näyttää:  </p>  <pre>   <code class="javascript language-javascript">  // src / kontit. jstuoda {connect} "react-redux";tuonti * komponentteina ". / Komponenttien;tuonti {addTodo, toggleTodo} lähtien '. /toimet';vienti const TodoList = yhteys (toiminto mapStateToProps (tila) {// .},toiminto mapDispatchToProps (lähetys) {// .}) (komponentit TodoList); </code>   </pre>  <p>  Luomme kontteja yhteystoiminnolla. Kun kutsumme  <code>  connect  <span class="f-c-white l-mr3">   </code> , siirrämme kaksi funktiota  <code>  mapStateToProps  <span class="f-c-white l-mr3">   </code>  ja  <code>  mapDispatchToProps  <span class="f-c-white l-mr3">   </code> . kohde;const text = syöttö. arvo;const isEnterKey = (tapahtuma, joka == 13);const isLongEnough = teksti. pituus> 0;jos (isEnterKey && isLongEnough) {tulo. arvo = '';addTodo (teksti);}};const toggleClick = id => tapahtuma => vaihdaTodo (id);palautus ( <div className = 'todo'>  <input type = 'text'classname = 'todo__entry'placeholder = 'Lisää todo'onKeyDown = {onSubmit} />  <ul className = 'todo__list'> {Todos. kartta (t => ( <li key = {t. saada (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>  Säilyttimet automaattisesti tilaavat varastoon tehdyt muutokset, ja ne tekevät uudelleen käärittyjä komponentteja aina, kun niiden kartoitettu rekvisiitta muuttuu.  </p>  <p>  Lopuksi meidän on saatava säiliöt tietoisiksi myymälästä käyttämällä  <code>   <Provider />   </code>  -komponenttia:  </p>  <pre>   <code class="javascript language-javascript">  // src / app. jstuonti Reagoi "reagoi";tuonti {render} kohteesta "react-dom";tuonti {createStore} kohteesta "redux";tuoda {Provider} "react-redux";tuonti vähennysventtiilistä ". / Vähennysventtiilillä ";tuoda {TodoList} kohteesta '. / Kontit;// ^^^^^^^^^^const store = createStore (vähennysventtiilijä);tehdä ( <Palveluntarjoaja = {tallentaa}>  <TodoList />  </ Tarjoaja> ,asiakirja. getElementById (sovelluspikakuvakkeen)); </code>   </pre>  <h3 class="f-c-grey-400">  Suositellut kurssit  </h3>  <h2 id="conclusion">  Päätelmä  </h2>  <p>  Ei ole kiistatonta, että Reactin ja Reduxin ympärillä oleva ekosysteemi voi olla melko monimutkainen ja pelottava aloittelijoille, mutta hyvä uutinen on, että lähes kaikki nämä käsitteet ovat siirrettäviä. Olemme tuskin koskettaneet Reduxin arkkitehtuurin pintaa, mutta olemme jo nähneet tarpeeksi auttamaan meitä oppimaan Elm-arkkitehtuuria tai valitsemaan ClojureScript-kirjaston, kuten Om tai Re-frame. Samoin olemme nähneet vain murto-osan mahdollisuuksista muuttuvien tietojen kanssa, mutta nyt meillä on paremmat valmiudet aloittaa kielen oppiminen kuten Clojure tai Haskell.  </p>  <p>  Olitpa vain tutustumassa web-sovellusten kehittämisen tilaan tai vietät koko päivän JavaScriptin kirjoittamisen, kokemus toimintoperusteisista arkkitehtuureista ja muuttumattomista tiedoista on jo tulossa kehittäjien tärkeäksi taitoksi ja  <em>  juuri nyt  </em>  on hyvä aika oppia olennaisia.  </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 = "Miten rakentaa Todo App käyttäen React, Redux ja muuttumaton. jsMiten rakentaa Todo App käyttäen React, Redux ja muuttumaton. jsToimitukset:
APIsTools & Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Tapaa kirjailija  </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">  Digitaalinen Nomad ja Yhdistyneen kuningaskunnan pohjautuvan Astral Dynamics -yrityksen perustaja.  </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 = "Miten rakentaa Todo App käyttäen React, Redux ja muuttumaton. jsMiten rakentaa Todo App käyttäen React, Redux ja muuttumaton. jsToimitukset:
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">  Paras tapa oppia reagoida aloittelijoille  </span>   </div>  <div class="f-large">  Wes Bos  </div>  <div>  Vaiheittainen koulutusohjelma, jolla voit rakentaa reaalimaailman React. js + Firebase-sovelluksia ja verkkosivuston osia pari iltapäivää. Käytä kuponkikoodia  <strong>  'SITEPOINT'  </strong>  kassalla saadaksesi  <strong>  25%  </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>  </todo>  </todo>  </todo>  </todolist>  </todolist>  </todolist>  </todolist>  </todolist>  </strike>  </input>  </input>  </ul>  </ul>  </html>  </head>  </link>                                           
March 1, 2018