Reducer dalam Redux

Dalam pelajaran lepas, kami menggunakan fungsi createSlice untuk membuat satu slice untuk produk products dan satu reducer yang akan mengemas kini slice itu, yang disimpan dalam store. Sekali lagi saya ingatkan, dalam Redux, data keadaan diubah menggunakan reducer.

Perlu diingat bahawa terdapat beberapa sekatan ke atas reducer. Reducer mengemas kini keadaan hanya berdasarkan nilai semasa keadaan yang diterima dan objek action, kemudian memutuskan bagaimana untuk mengubah keadaan dan mengembalikan nilai baharunya.

Kami tahu bahawa secara lalai, objek dan array dalam JavaScript adalah mutable (boleh diubah). Juga kami tahu bahawa state tidak boleh diubah secara langsung, dalam kes sedemikian, hanya salinan yang harus digunakan. Peraturan ini mesti dipatuhi oleh reducer juga. Tetapi menulis logik sedemikian secara manual boleh menjadi agak membosankan dan kompleks, dan di sinilah fungsi createSlice datang untuk menyelamatkan, yang menggunakan pustaka Immer, untuk menukar kod 'mutable' anda kepada 'immutable'. Oleh itu, kita 'boleh berdosa' dan memudahkan hidup hanya apabila menggunakan fungsi createSlice atau createReducer.

Sekatan ke atas reducer juga termasuk menggunakan logik tak segerak, pengiraan nilai rawak dan melaksanakan "kesan sampingan" lain. Dan sekarang, setelah berkenalan dengan reducer dengan lebih dekat, mari kita kembali kepada aplikasi produk kami.

Dalam aplikasi kami, terdapat store yang kami buat dalam pelajaran sebelumnya, tetapi buat masa ini tiada apa-apa di dalamnya. Mari buka fail store.js kami dan tambahkan sedikit kod. Sebagai permulaan, import fungsi reducer untuk produk ke dalamnya:

Sekarang sebagai reducer, kami boleh menentukan fungsi yang diimport productsReducer:

Dengan baris di atas, kami memberitahu store kami bahawa sekarang apabila action berlaku semua data untuk slice state.products akan dikemas kini oleh reducer productsReducer.

Sekarang anda boleh menjalankan apl (perhatikan, amaran tentang reducer tidak sah telah hilang dari konsol!), buka Redux DevTools dalam pelayar dan terokai tabnya. Sebagai contoh, dengan mengklik pada tab State dalam tab Inspector kita boleh melihat dua objek produk kami, yang dipaparkan sebagai nilai keadaan awal pada pelancaran pertama apl. Pada tab Log monitor, kita melihat slice mana yang ada dalam state global - iaitu slice products, yang merangkumi dua objek. Juga lihat tab Chart.