Cara Membina Aplikasi Todo Menggunakan React, Redux, dan Immutable.js

Senibina berasaskan komponen React dan aliran data unidirectional menjadikannya sesuai untuk penstrukturan UI. Walau bagaimanapun, alat pengurusan negeri sengaja mudah, mengingatkan kita bahawa bertindak balas terutamanya mengendalikan pandangan dalam corak model-view-controller (MVC). Semasa membina aplikasi besar semata -mata dengan React adalah mungkin, kod yang cekap memerlukan pengurusan negeri luaran.

Walaupun tiada penyelesaian pengurusan negeri React rasmi wujud, beberapa perpustakaan dengan lancar diintegrasikan dengan paradigmnya. Artikel ini menunjukkan membina aplikasi mudah menggunakan React dengan dua perpustakaan sedemikian: redux dan immutable.js.

Takeaways utama:

redux dan tidak dapat dipertahankan.js meningkatkan keupayaan React untuk aplikasi yang lebih besar dengan menyediakan bekas negara berpusat dan struktur data yang tidak berubah.
• Membina aplikasi React, Redux, dan Immutable. .
• Walaupun ekosistem React dan Redux pada mulanya kelihatan rumit, konsep yang mendasari boleh dipindah milik dan berharga untuk mempelajari seni bina dan bahasa lain, menjadikannya penting untuk pembangunan web.
redux: bekas negara berpusat

Redux, yang diilhamkan oleh Flux dan Elm, adalah perpustakaan ringan yang bertindak sebagai repositori pusat untuk keadaan permohonan. Ia mengawal perubahan negara menggunakan prinsip berikut:

Suatu kedai memegang keseluruhan keadaan aplikasi.

Kemas kini keadaan berlaku semata -mata melalui
1. tindakan
, bukan mutasi langsung.
2. Teras kedai Redux adalah fungsi reducer. Fungsi ini mengambil keadaan semasa dan tindakan, mengembalikan keadaan
baru

. React Components menghantar tindakan ke kedai, yang kemudiannya mencetuskan komponen semula komponen seperti yang diperlukan.

immutableJS: Struktur data yang tidak berubah

Sejak Redux menghalang mutasi negeri langsung, menggunakan struktur data yang tidak berubah menguatkuasakan kekangan ini. ImmutableJS menawarkan koleksi yang tidak berubah dengan antara muka seperti yang boleh berubah, menarik inspirasi dari Clojure dan Scala.

Demo: Senarai Todo Mudah

Contoh ini menggunakan React, Redux, dan ImmutableJs untuk membuat senarai TODO yang membolehkan penambahan dan siap siap tugas. Kod Lengkap boleh didapati di GitHub [pautan ke repo github akan pergi ke sini].

Persediaan

1. Buat folder projek dan mulakan package.json menggunakan npm init.
2. Pasang kebergantungan yang diperlukan:

npm install --save react react-dom redux react-redux immutable
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

3. Kami akan menggunakan JSX dan ES2015, disusun dengan Babel melalui Webpack. Buat webpack.config.js:

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: ['es2015', 'react'] }
      }
    ]
  }
};

4. tambahkan skrip binaan ke package.json:

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

run npm run build untuk disusun.

Komponen React

Kami akan membuat dua komponen: <todo></todo> dan <todolist></todolist>. (Kod komponen akan dimasukkan di sini, sama seperti input asal tetapi berpotensi dengan pelarasan kecil untuk kejelasan dan kesimpulan).

redux dan integrasi tidak berubah

Terjemahkan data dummy ke dalam koleksi ImmutableJS: (Kod untuk menukar data dummy ke immutableJS akan dimasukkan di sini).

Laraskan komponen untuk menggunakan kaedah immutableJS (mis., todo.get('id') bukan todo.id).

Tindakan

Tentukan pencipta tindakan untuk menambah dan menukarkan todo: (Kod untuk pencipta tindakan akan dimasukkan di sini).

reducer

Buat fungsi reducer untuk mengendalikan tindakan dan mengemas kini keadaan: (Kod untuk fungsi reducer akan dimasukkan di sini).

Menyambung komponen dan simpan

Buat kedai dan sambungkannya ke komponen React menggunakan react-redux: (kod untuk menghubungkan komponen dan kedai, termasuk bekas dan penyedia, akan dimasukkan di sini).

Kesimpulan

Walaupun ekosistem React dan Redux mempunyai lengkung pembelajaran yang curam, prinsip -prinsip asas digunakan secara meluas. Pengenalan ini menyediakan asas untuk meneroka seni bina dan bahasa yang serupa. Kemahiran dalam seni bina berasaskan tindakan dan data yang tidak berubah semakin berharga untuk pemaju web moden.

Soalan Lazim Menggunakan Redux dengan React (bahagian ini akan ditambah di sini, diubahsuai untuk kebolehbacaan yang lebih baik dan berpotensi dipendekkan/diringkaskan untuk keringkasan)

Atas ialah kandungan terperinci Cara Membina Aplikasi Todo Menggunakan React, Redux, dan Immutable.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!