Representasi sederhana dari aliran data Redux adalah:

User interaction dispatches an action --> The reducer updates the state based on the action --> Subscribed components update the UI based on the new state.

Mari kita pertimbangkan aplikasi berikut:

Ini adalah contoh bersih dari aplikasi berbasis redux. Hanya ada satu komponen sederhana yang terhubung ke siklus redux ( Counter ). Kami memiliki dua tombol di dalamnya: increment dan decrement . Seperti yang mungkin sudah Anda duga — tombol ini akan menambah atau mengurangi nilai penghitung .

Sekarang mari kita cari tahu objek dan fungsi apa yang kita perlukan untuk membangun Redux dari awal: — createStore , combineReducers , connect, dan Provider .

buatToko

Pohon objek yang tidak dapat diubah dan menyimpan status aplikasi. createStore(reducer, state, enhancer): createStoremenerima reducer, statedan enhancersebagai input, dan output storeobjek.

• getState(): dapatkan status toko
• dispatch(action): gunakan reduceruntuk mendapatkan yang baru statedan memberi tahu setiap pendengar tentang perubahan status.
• subscribe(listener): memungkinkan kita untuk menambahkan pendengar kestore

Fungsi combineReducerspembantu mengubah objek yang nilainya berbeda fungsi pereduksi menjadi satu fungsi pereduksi yang dapat Anda lewati createStore.. Ini hanyalah fungsi utilitas untuk menggabungkan beberapa reduksi menjadi satu dan menghemat waktu untuk beberapa kode boilerplate. Perannya adalah untuk mengganti cuplikan berikut:

export default function todoApp(state = {}, action) {
  return {
    filter: filter(state.filter, action),
    todos: todos(state.todos, action)
  }
}
with:
const todoApp = combineReducers({
  filter,
  todos
});

function combineReducers(obj) {  
  return (state = {}, action) => {
    const newState = {};
    for (let key in obj) {
      newState[key] = obj[key](state[key], action);
    }
    return newState;
  }
}
    
      

Fungsi ini connect()menghubungkan komponen React ke toko Redux.

• Ini menyediakan komponen yang terhubung dengan potongan data yang dibutuhkan dari toko, dan fungsi yang dapat digunakan untuk mengirimkan tindakan ke toko.
• Itu tidak mengubah kelas komponen yang diteruskan ke sana; sebagai gantinya, ia mengembalikan kelas komponen baru yang terhubung yang membungkus komponen yang Anda lewati.

Itu <Provider />membuat Redux storetersedia untuk semua komponen bersarang yang telah dibungkus dalam connect()fungsi.

• Karena setiap komponen React dalam aplikasi React-Redux dapat dihubungkan, sebagian besar aplikasi akan merender a <Provider>di tingkat atas, dengan seluruh pohon komponen aplikasi di dalam Provider.
• Untuk mengimplementasikannya, kita dapat menggunakan API konteks baru . Jadi Penyedia menjadi sangat sederhana. Satu-satunya hal yang perlu kita lakukan adalah menggunakan API itu dan meneruskan penyimpanannya :

Kesimpulan

Kami telah membahas objek dan fungsi dasar yang kami butuhkan untuk membangun Redux dari awal. Saya harap Anda telah menemukan ini berguna.

Terima kasih telah membaca :)