Redux nilai sederhana

Cara mengurangi kode boilerplate

Kami tidak akan menjelaskan di sini bagaimana redux disusun dan cara kerjanya. Anda harus tahu bahwa ia menggunakan tindakan dan reduksi untuk mengelola status dan kebanyakan orang cenderung menggunakan penyeleksi untuk membaca status dari redux.

Pendahuluan

Redux sangat bagus untuk mengelola negara Anda tetapi dapat dengan mudah meningkat ke banyak kode boilerplate. Bahkan jika Anda mencoba mengelola status untuk berbagai hal yang memiliki kasus penggunaan serupa, Anda akhirnya membuat tindakan dan reduksi untuk hal tersebut.

Ada satu aturan sederhana yang ingin saya ikuti ketika mengerjakan proyek react-redux. Jika Anda menggunakan redux maka gunakan di mana saja! Jangan mengacaukan proyek Anda dengan beberapa bagian yang menggunakan status komponen dan bagian lain yang menggunakan redux. Redux harus menjadi “satu-satunya sumber kebenaran” Anda. Jangan campur dengan setState. Satu-satunya bagian/komponen yang dapat menggunakan status komponen adalah komponen tersebut dapat digunakan kembali dalam proyek yang tidak menggunakan redux. Itu tidak boleh berhubungan dengan logika aplikasi Anda.

Masalah

Jadi mengingat semua itu, saya berada dalam situasi yang aneh. Di semua proyek saya, saya menggunakan perpustakaan Material-UI. Ia menggunakan komponen seperti TextFields, Togglers, Dialogs dll. yang menerima properti. Salah satu contoh yang bagus adalah Dialog. Ia mengatur sendiri bagaimana ia akan mengatur gayanya jika terbuka atau tertutup tetapi kita memutuskan dengan properti kapan harus terbuka atau tertutup. Karena keadaan dialog terbuka atau tidak terkait dengan logika aplikasi saya, maka harus dikelola oleh redux.

Karena saya menggunakan Dialog di 90% untuk menampilkan peringatan penghapusan seperti “Apakah Anda benar-benar ingin menghapus item/perusahaan/artikel ini dll..?” menulis tindakan dan pengurangan untuk setiap penghapusan itu hanyalah kegilaan. Jadi menulis satu tindakan dan peredam untuk mengelola semua status dialog adalah solusi yang tepat bagi saya. Itu adalah peredam yang sangat sederhana yang menyimpan setiap dialog apakah terbuka atau tidak.

Ini adalah keseluruhan kode tindakan:

import * as types from './types';
export function setDialogIsOpen(id, isOpen){
  return {
    type: types.ON_DIALOG_OPEN_CHANGED,
    id,
    isOpen
  };
}

Dan ini keseluruhan kode peredamnya:

import * as types from './types';
export default function dialogs(state={}, action){
switch (action.type) {
    case types.ON_DIALOG_OPEN_CHANGED:
    return {...state, [action.id]: action.isOpen};
    default:
    return state;
  }
}

Dengan itu saya dapat mengatur status isOpen untuk dialog tanpa akhir di aplikasi saya dengan memisahkannya berdasarkan nama atau id. Saya punya solusi yang bagus dan berguna.

Untuk mendapatkan status isOpen ke komponen dialog saya, saya hanya perlu memeriksanya seperti ini:

<Dialog
   title={intl.formatMessage({id: 'delete_task_title'})}
   actions={actions}
   modal={false}
   open={dialogs.delete_task===true}
   onRequestClose={this.handleClose}>
   {intl.formatMessage({id: 'delete_task_message'})}
</Dialog>

Anda telah memperhatikan seluruh ceknya adalah dialogs.delete_task===true . Hanya jika delete_task adalah true dialog akan terbuka. Jika tidak terdefinisi atau salah maka akan ditutup.

Di sini kami memiliki solusi sederhana untuk status dialog tetapi bagaimana dengan status "sederhana" lainnya seperti tugas saat ini, menampilkan atau menyembunyikan div, id baris yang dipilih, dll... Semua kasus di mana Anda hanya perlu menyimpan nilai yang sangat sederhana.

Larutan

Solusinya sama dengan yang saya gunakan untuk dialog tetapi diganti namanya;)

Tindakan:

import * as types from './types';
export function setSimpleValue(id, value){
  return {
    type: types.ON_SIMPLE_VALUE_CHANGED,
    id,
    value
  };
}

Peredam:

import * as types from './types';
export default function simpleValues(state={}, action){
switch (action.type) {
    case types.ON_SIMPLE_VALUE_CHANGED:
    return {...state, [action.id]: action.value};
    default:
    return state;
  }
}

Ini berfungsi seperti solusi dialog tetapi dengan penggantian nama Anda tahu itu hanya untuk menyimpan nilai-nilai sederhana. Ini harus digunakan hanyauntuk nilai-nilai “sederhana”! Saat menyimpan nilai tunggal dan sederhana yang hanya dapat memiliki nilai atau tidak atau hanya trueatau false. Segera setelah menjadi rumit dengan array, beberapa nilai, Anda harus membuat tindakan dan peredam terpisah.

Semua nilai sederhana dipisahkan berdasarkan nama atau id. Sangat mudah untuk menggunakan solusi semacam ini tetapi Anda selalu memiliki risiko kesalahan ketik dan mengulangi penyihir pengidentifikasi nama/id dapat menimbulkan efek samping dan kesalahan yang aneh.

Saya akan merekomendasikan untuk menggunakannya pada tahap awal aplikasi sampai Anda 100% yakin tindakan dan reduksi seperti apa yang Anda perlukan. Sangat berguna untuk membuat beberapa prototipe sederhana tanpa membuat tindakan dan reduksi.

Kegigihan

Jika Anda menggunakan perpustakaan persistensi, ada juga solusi “sederhana”. Cukup buat tindakan dan peredam diganti namanya menjadi persistentValues dan gunakan kode yang sama dengan penggantian nama tersebut. Sebagian besar perpustakaan persistensi memungkinkan Anda menentukan daftar putih/hitam untuk menentukan bagian mana dari negara Anda yang harus dipertahankan atau tidak. Masukkan saja simpleValues ke dalam daftar hitam atau persistentValues ke daftar putih.

Demo

Jika Anda tertarik dengan cara kerjanya, Anda dapat melihatnya di aplikasi demo yang menggunakan reaksi, redux, dan firebase: ReactMostWanted