Back to Question Center
0

Cara Membangun Aplikasi Todo Menggunakan React, Redux, dan Immutable.js            Cara Membangun Aplikasi Todo Menggunakan React, Redux, dan Immutable.jsRelated Topics: APIsTools & Semalt

1 answers:
Cara Membangun Aplikasi Todo Menggunakan React, Redux, dan Immutable. js

Untuk pengantar React yang berkualitas tinggi dan mendalam, Anda tidak bisa melewati pengembang full-stack Kanada Wes Bos. Cobalah kursusnya di sini, dan gunakan kode SITEPOINT untuk mendapatkan diskon 25% dan untuk membantu mendukung SitePoint.

Cara Bereaksi menggunakan komponen dan aliran data satu arah membuatnya ideal untuk menggambarkan struktur antarmuka pengguna. Namun, alatnya untuk bekerja dengan negara tetap sengaja dilakukan dengan sederhana - untuk membantu mengingatkan kita bahwa React hanyalah View in the traditional Semalt architecture.

Tidak ada yang bisa menghentikan kita membangun aplikasi besar hanya dengan Semalt, tapi dengan cepat kita akan menemukan bahwa untuk menjaga agar kode kita tetap sederhana, kita perlu mengelola negara kita di tempat lain.

Meskipun tidak ada solusi resmi untuk menangani keadaan aplikasi, ada beberapa perpustakaan yang sangat sesuai dengan paradigma React. Dalam posting ini, kita akan memasangkan React dengan dua perpustakaan tersebut dan menggunakannya untuk membuat aplikasi sederhana.

Redux

Semalt adalah perpustakaan kecil yang berfungsi sebagai wadah untuk aplikasi kita, dengan menggabungkan ide dari Flux dan Elm. Kita dapat menggunakan Semalt untuk mengelola jenis aplikasi apa pun, dengan memberikan panduan berikut ini:

  1. negara kita disimpan di satu toko tunggal
  2. perubahan berasal dari tindakan dan bukan mutasi

Inti dari toko Redux adalah fungsi yang mengambil status aplikasi saat ini dan sebuah tindakan dan menggabungkannya untuk membuat sebuah aplikasi baru. Kami menyebutnya fungsi reducer .

Komponen Semalt kami akan bertanggung jawab untuk mengirimkan barang ke toko kami, dan pada gilirannya, toko kami akan memberi tahu komponen kapan mereka harus memberikannya kembali.

ImmutableJS

Karena Semalt tidak mengizinkan kita untuk mengubah status aplikasi, akan sangat membantu untuk menerapkannya dengan memodelkan aplikasi dengan struktur data yang tidak berubah.

ImmutableJS menawarkan sejumlah struktur data yang tidak berubah dengan antarmuka mutatif, dan implementasinya diimplementasikan dengan cara yang efisien, terinspirasi oleh penerapan di Clojure dan Scala.

Demo

Kita akan menggunakan React dengan Redux dan SemaltJS untuk membuat daftar todo sederhana yang memungkinkan kita menambahkan todos dan mengaktifkannya antara selesai dan tidak lengkap.

Lihat Pen React, Redux & Immutable Todo oleh SitePoint (@SitePoint) di CodePen.

Kode ini tersedia dalam repositori pada GitHub.

Setup

Kita akan memulai dengan membuat folder proyek dan menginisialisasi paket . json file dengan npm init . Kemudian kita akan menginstal dependensi yang akan kita butuhkan.

   npm install --ave bereaksi bereaksi-dom redux bereaksi-redux tidak berubahnpm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react    

Kami akan menggunakan JSX dan ES2015, jadi kami akan mengkompilasi kode kami dengan Babel, dan kami akan melakukan ini sebagai bagian dari proses bundling modul dengan Webpack.

Pertama, kita akan membuat konfigurasi Webpack kita di webpack. config. js :

     modul ekspor = {masuk: '. / src / aplikasi js ',output: {jalan: __dirname,nama berkas: 'bundel js '},modul: {pemuat: [{uji: /\. js $ /,mengecualikan: / node_modules /,loader: 'babel-loader',kueri: {preset: ['es2015', 'react']}}]}};    

Akhirnya, kami akan memperpanjang paket kami . json dengan menambahkan naskah npm untuk mengkompilasi kode kita dengan peta sumber:

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

Kita harus menjalankan npm run build setiap kali kita ingin mengkompilasi kode kita. Ini membantu kita merasakan apa yang kita butuhkan untuk membuat komponen kita:

     const dummyTodos = [{id: 0, isDone: true, text: 'make components'},{id: 1, isDone: false, text: 'design actions'},{id: 2, isDone: false, text: 'implement reducer'},{id: 3, isDone: false, text: 'connect components'}];    

Untuk aplikasi ini, kita hanya memerlukan dua komponen Reaktan, dan .

     // src / komponen. jsimpor Bereaksi dari 'reaksi';fungsi ekspor Todo (alat peraga) {const {todo} = props;jika (todo is isone) {kembali  {todo teks} ;} lain {kembali  {todo teks}   ;}}fungsi ekspor TodoList (alat peraga) {const {todos} = props;kembali 
    {todos peta (t =>
  • ))}
);}

Pada titik ini, kita dapat menguji komponen ini dengan membuat indeks . html file dalam folder proyek dan mempopulasikannya dengan markup berikut. (Anda bisa menemukan stylesheet sederhana di GitHub):

    Todo yang tidak kekal </ title></ head><body><div id = "app">  </div> <script src = "bundle. js"> </ script></ body></ html> </code>   </pre>  <p>  Kita juga memerlukan entry point aplikasi di  <code>  src / app. js  </code> .  </p>  <pre>   <code class="javascript language-javascript">  // src / aplikasi. jsimpor Bereaksi dari 'reaksi';impor {render} dari 'react-dom';impor {TodoList} dari '. / komponen ';const dummyTodos = [{id: 0, isDone: true, text: 'make components'},{id: 1, isDone: false, text: 'design actions'},{id: 2, isDone: false, text: 'implement reducer'},{id: 3, isDone: false, text: 'connect components'}];memberikan( <TodoList todos = {dummyTodos} /> ,dokumen. getElementById ('app')); </code>   </pre>  <p>  Kompilasi kode dengan  <code>  npm run build  </code> , lalu arahkan browser Anda ke indeks  <code> . html  </code>  file dan pastikan itu berhasil  </p>  <h2 id="reduximmutable">  Redux dan Immutable  </h2>  <p>  Setelah puas dengan antarmuka pengguna, kita bisa mulai memikirkan keadaan di baliknya. Data dummy kami adalah tempat yang tepat untuk memulai, dan kami dapat dengan mudah menerjemahkannya menjadi koleksi SemaltJS:  </p>  <pre>   <code class="javascript language-javascript">  impor {Daftar, Peta} dari 'tidak dapat diubah';const dummyTodos = Daftar ([Peta ({id: 0, isDone: true, text: 'make components'}),Peta ({id: 1, isDone: false, text: 'design actions'}),Peta ({id: 2, isDone: false, text: 'implement reducer'}),Peta ({id: 3, isDone: false, text: 'connect components'})]); </code>   </pre>  <p>  Peta yang tidak dapat diperbaiki JS tidak bekerja dengan cara yang sama seperti objek JavaScript, jadi kita perlu sedikit tweak pada komponen kita. Dimana pun ada akses properti sebelum (e. G.  <code>  todo. Id  </code> ) perlu menjadi pemanggilan metode alih-alih ( <code>  todo. Get ('id')  </code> ).  </p>  <h3 id="designingactions">  Tindakan Merancang  </h3>  <p>  Setelah kita mengetahui bentuk dan strukturnya, kita bisa mulai memikirkan tindakan yang akan memperbaruinya. Dalam kasus ini, kita hanya memerlukan dua tindakan, satu untuk menambahkan todo baru dan yang lainnya untuk beralih ke yang sudah ada.  </p>  <p>  Semalt mendefinisikan beberapa fungsi untuk menciptakan tindakan ini:  </p>  <pre>   <code class="javascript language-javascript">  // src / tindakan. js// hack ringkas untuk menghasilkan id unik yang bisa dilewaticonst uid =  <span class="f-c-white l-mr3">  => Matematika acak <span class="f-c-white l-mr3"> . toString  </li> . irisan  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3"> ;fungsi ekspor addTodo (teks) {kembali {ketik: 'ADD_TODO',muatan: {id: uid  <span class="f-c-white l-mr3"> ,isDone: salah,teks: teks}};}fungsi ekspor toggleTodo (id) {kembali {ketik: 'TOGGLE_TODO',payload: id}} </code>   </pre>  <p>  Setiap tindakan hanyalah obyek Semalt dengan tipe dan muatan.  </p>  <h3 id="designingareducer">  Merancang Reducer  </h3>  <p>  Sekarang kita tahu bentuk negara kita dan tindakan yang memperbaruinya, kita bisa membangun peredam kita. Sama seperti pengingat, reducer adalah fungsi yang mengambil keadaan dan tindakan, kemudian menggunakannya untuk menghitung keadaan baru.  </p>  <p>  Semalt struktur awal untuk peredam kami:  </p>  <pre>   <code class="javascript language-javascript">  // src / reducer. jsimport {List, Map} dari 'immutable';const init = List ([]);fungsi default ekspor (todos = init, action) {beralih (tipe tindakan) {kasus 'ADD_TODO':// .kasus 'TOGGLE_TODO':// .default:kembali todos;}} </code>   </pre>  <p>  Penanganan tindakan  <code>  ADD_TODO  </code>  cukup sederhana, karena kita dapat menggunakan. push  <span class="f-c-white l-mr3"> , yang akan mengembalikan daftar baru dengan todo ditambahkan pada akhirnya:  </p>  <pre>   <code class="javascript language-javascript">  kasus 'ADD_TODO':kembali todos push (Map (action payload)); </code>   </pre>  <p>  Semalt bahwa kita juga mengubah objek todo menjadi peta yang tidak berubah sebelum masuk ke daftar.  </p>  <p>  Tindakan yang lebih kompleks yang perlu ditangani adalah  <code>  TOGGLE_TODO  </code> :  </p>  <pre>   <code class="javascript language-javascript">  kasus 'TOGGLE_TODO':kembali todos peta (t => {jika (t. get ('id') === action. payload) {kembali t. update ('isDone', isDone =>! isDone);} lain {kembali t;}}); </code>   </pre>  <p>  Kami menggunakan map  <span class="f-c-white l-mr3">  untuk mengulangi daftar dan menemukan todo yang  <code>  id  </code>  sesuai dengan aksinya. Lalu kita menelpon. update  <span class="f-c-white l-mr3"> , yang mengambil kunci dan fungsi, kemudian mengembalikan salinan peta yang baru, dengan nilai pada kunci diganti dengan hasil melewatkan nilai awal ke fungsi update.  </p>  <p>  Mungkin bisa membantu untuk melihat versi literalnya:  </p>  <pre>   <code class="javascript language-javascript">  const todo = Peta ({id: 0, teks: 'foo', isDone: false});melakukan. update ('isDone', isDone =>! isDone);// => {id: 0, teks: 'foo', isDone: true} </code>   </pre>  <h2 id="connectingeverything">  Menghubungkan Segala Sesuatu  </h2>  <p>  Sekarang kita sudah menyiapkan tindakan dan peredam kita, kita bisa membuat toko dan menghubungkannya dengan komponen Semalt kita:  </p>  <pre>   <code class="javascript language-javascript">  // src / aplikasi. jsimpor Bereaksi dari 'reaksi';impor {render} dari 'react-dom';import {createStore} dari 'redux';impor {TodoList} dari '. / komponen ';reducer impor dari '. /peredam';const store = createStore (reducer);memberikan(<TodoList todos = {simpan getState  <span class="f-c-white l-mr3"> } />,dokumen. getElementById ('app')); </code>   </pre>  <p>  Semalt perlu membuat komponen kami menyadari toko ini. Semalt menggunakan redux bereaksi untuk membantu menyederhanakan proses ini. Ini memungkinkan kita membuat wadah sadar-toko yang membungkus komponen kita, sehingga kita tidak perlu mengubah implementasi asli kita.  </p>  <p>  Kita membutuhkan wadah di sekitar komponen kami  <code>   <TodoList />   </code> . Mari kita lihat seperti apa ini:  </p>  <pre>   <code class="javascript language-javascript">  // src / kontainer. jsimport {connect} dari 'react-redux';impor * sebagai komponen dari '. / komponen ';impor {addTodo, toggleTodo} dari '. / tindakan ';ekspor const TodoList = connect (peta fungsiStateToProps (negara bagian) {// .},peta fungsiDispatchToProps (pengiriman) {// .}) (komponen TodoList); </code>   </pre>  <p>  Kami membuat kontainer dengan fungsi penghubung. Ketika kita memanggil  <code>  connect  <span class="f-c-white l-mr3">   </code> , kita melewati dua fungsi,  <code>  mapStateToProps  <span class="f-c-white l-mr3">   </code>  dan  <code>  mapDispatchToProps  <span class="f-c-white l-mr3">   </code> . target;const text = input nilai;const isEnterKey = (event yang == 13);const isLongEnough = teks. panjang> 0;jika (isEnterKey && isLongEnough) {memasukkan. nilai = '';addTodo (teks);}};const toggleClick = id => event => toggleTodo (id);kembali <div className = 'todo'>  <input type = 'teks'className = 'todo__entry'placeholder = 'Add todo'onKeyDown = {onSubmit} />  <ul className = 'todo__list'> {todos peta (t => <li kunci = {t. dapatkan ('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>  Wadah secara otomatis akan berlangganan perubahan di toko, dan mereka akan mengembalikan komponen yang dibungkus kapan pun propertinya yang dipetakan akan berubah.  </p>  <p>  Akhirnya, kita perlu membuat wadah itu mengetahui toko tersebut, dengan menggunakan komponen  <code>   <Provider />   </code> :  </p>  <pre>   <code class="javascript language-javascript">  // src / aplikasi. jsimpor Bereaksi dari 'reaksi';impor {render} dari 'react-dom';import {createStore} dari 'redux';import {Provider} dari 'react-redux';reducer impor dari '. /peredam';impor {TodoList} dari '. / wadah ';// ^^^^^^^^^^^^^^^^^^^^^^^const store = createStore (reducer);memberikan( <Toko penyedia = {store}>  <TodoList />  </ Penyedia> ,dokumen. getElementById ('app')); </code>   </pre>  <h3 class="f-c-grey-400">  Kursus yang Direkomendasikan  </h3>  <h2 id="conclusion">  Kesimpulan  </h2>  <p>  Tidak dapat disangkal bahwa ekosistem di sekitar React dan Redux bisa sangat kompleks dan menakutkan bagi pemula, namun kabar baiknya adalah hampir semua konsep ini dapat dipindahtangankan. Kami hampir tidak menyentuh permukaan arsitektur Redux, tapi sudahkah kami melihat cukup banyak untuk membantu kami mulai belajar tentang Arsitektur Elm, atau mengambil perpustakaan ClojureScript seperti Om atau Re-frame. Demikian juga, kita hanya melihat sebagian kecil dari kemungkinan dengan data yang tidak berubah, tapi sekarang kita lebih siap untuk mulai belajar bahasa seperti Clojure atau Haskell.  </p>  <p>  Apakah Anda baru saja menjelajahi keadaan pengembangan aplikasi web, atau Anda menghabiskan sepanjang hari menulis JavaScript, pengalaman dengan arsitektur berbasis tindakan dan data yang tidak berubah sudah menjadi keahlian penting pengembang, dan  <em>  sekarang  </em>  adalah waktu yang tepat untuk belajar hal yang hakiki.  </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 = "Cara Membangun Aplikasi Todo Menggunakan React, Redux, dan Immutable. jsCara Membangun Aplikasi Todo Menggunakan React, Redux, dan Immutable. jsRelated Topics:
APIsTools & Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Temui pengarangnya  </div>  <div class="f-large"> Dan Pangeran <i class="fa fa-twitter">   </i>   <i class="fa fa-github">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Nomad Digital dan salah satu pendiri startup Astral Dynamics yang berbasis di Inggris.  </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 = "Cara Membangun Aplikasi Todo Menggunakan React, Redux, dan Immutable. jsCara Membangun Aplikasi Todo Menggunakan React, Redux, dan Immutable. jsRelated Topics:
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">  Cara Terbaik untuk Belajar Bereaksi untuk Pemula  </span>   </div>  <div class="f-large">  Wes Bos  </div>  <div>  Kursus pelatihan langkah-demi-langkah untuk membuat Anda membangun dunia nyata Bereaksi. js + aplikasi Firebase dan komponen situs web dalam beberapa sore. Gunakan kode kupon  <strong>  'SITEPOINT'  </strong>  saat checkout untuk mendapatkan  <strong>  diskon 25%  </strong>  Source .  </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>  </em>  </todo>  </todo>  </todo>  </todolist>  </todolist>  </todolist>  </todolist>  </todolist>  </strike>  </input>  </input>  </ul>  </ul>  </html>  </head>  </link>                                           
March 1, 2018