Redux - merevisi logika dan tindakan peredam

Suatu hari saya bermain-main dengan banyak file redux'a, di mana, secara logis, file dipindahkan ke reduksi, aksi, ketik konstanta aksi. Semua ini ternyata menjadi tugas yang agak sulit, menjaga semua jenis file ini di kepala Anda dan melacak logikanya. Dan ... eureka, muncul ide untuk menyederhanakan penulisan logika redux. Mungkin menciptakan sepeda Anda, tetapi siapa yang tidak mencoba menulis sepeda motor mereka? Tetapi yang utama bukanlah menulis, tetapi menulis kapan mendukung. Biarkan saya mencoba untuk menunjukkan sedikit visi saya tentang logika reduks saya.

Mulai

Dan jadi kami telah mengurangi:

//   import { TODO } from './actions/const'; ..... //      .... //    reducer function todoApp(state = initialState, action) { switch (action.type) { case TODO.SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) case TODO.ADD_TODO: return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] }) case TODO.TOGGLE_TODO: return Object.assign({}, state, { todos: state.todos.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) }) ...          ...            ... default: return state } } 

diambil dari dok di redux .

tindakan terlihat seperti:

 //   import { TODO } from './const'; export const addTodo = (value) => ({ type: TODO.ADD_TODO, payload: value }) 

konstanta Saya pikir tidak perlu untuk menunjukkan.

BOOL

Saya akan mencoba menggambarkan kegilaan yang saya alami ketika membaca kode, terutama ketika men-debug atau memperluas fungsionalitas.

• search - sepanjang waktu Anda perlu menekan Ctrl + F dan secara global Ctrl + Shift + F
• tidak terlihat langsung dari tempat kaki tumbuh. Itu mengalir dari paragraf di atas.
• tidak, ini hanya sedikit, jadi saya masih memiliki seluruh proyek yang ditembus oleh konstanta. Tidak, saya tidak menentang konstanta, tetapi mengapa? Selain itu, jika mereka digunakan bersama-sama dengan bersarang seperti pada contoh, dan jika mereka digabungkan dari beberapa, maka ini umumnya adalah navigasi yang hebat.
• logika kabur. Di satu tempat tindakan di tempat lain, pemrosesan tindakan ini dalam konstanta ketiga (opsional) hanya diperlukan oleh keduanya.
• Saya perlu menjaga banyak file tetap terbuka saat mengembangkan atau debugging. Itu mengalir dari paragraf di atas.
  Baik, dll

Entri logika

Mungkin akan terasa aneh dan mengejutkan pada awalnya, tetapi tetap bagi saya ini adalah tempatnya. Saya akan mencoba menyampaikan template saya.

peredam

memata-matai google

Gear - mekanisme yang mengubah torsi dan tenaga. Ini adalah satu atau lebih roda gigi yang berinteraksi satu sama lain dan mengurangi jumlah putaran mesin ke kecepatan yang dapat diterima dari simpul yang menjalankan.

Artinya, poros di atasnya memiliki roda gigi, roda gigi ini mentransmisikan rotasi ke roda gigi lain, yang pada gilirannya berputar ke porosnya. Kami menghapus poros dan roda gigi dilepaskan dengan itu. Bukan modul yang terputus-putus.

Jika Anda menjalankan alegori lebih lanjut, poros adalah aksi dan roda gigi adalah logika. Dari sinilah kemudian bahwa gearbox bertindak sebagai tautan dalam memastikan transmisi torsi, mis. Data dalam aplikasi. Ini harus mendukung lingkungan kerja mekanisme yang ideal.

tindakan

Seperti disebutkan di atas, ini adalah aksi itu sendiri, dan logika dari energi apa yang ditransmisikan (dalam kasus kami, data).

Jadi ayo pergi. Sepeda saya

peredam:

 export function todoApp(state = initialState, action) { if (typeof action.func === 'function') { return action.func(state); } } 

ya ini semua peredam saya. Saat ini mungkin akan ada celah kecil dalam polanya, bagaimana? kami mengambil logika dari reducer'a ..? Ya Saya katakan, kami mengambil logika dari reducer'a !!!

Mari kita lihat aksi:

 export function addTodo = (value) => ({ type: 'ADD_TODO' , payload: value, func: (state) =>({...state, value}) }) } 

Untuk itu, kami mengeluarkan logika yang bertanggung jawab untuk mentransfer data ke toko. Peredam tetap untuk memastikan operasi seluruh mekanisme. Dan dia harus melakukannya dengan baik tanpa terganggu oleh hal-hal yang tidak menjadi perhatiannya. Dan kita hanya bisa mengamati urutan di mana kaki tumbuh dan jika perlu, kemudian dengan cepat menemukan dan memperbaiki atau menambah.

Ini perlu diperhatikan. Kami menghapus konstanta. Ya dan beralih juga. Yang memungkinkan untuk mengurangi kompleksitas eksekusi O (1) di reducer'e.

Ini hanya contoh sketsa yang dapat Anda kembangkan dan hapus kombinasikanReducers. Memperluas, menambah, mengubah kebutuhan Anda sangat hebat, mengambil alat dan menjadikannya ideal untuk tugas Anda.

Dan yang paling penting saya ingin katakan.

Jadilah cerdas. beee