Memahami, dan di Redux Store Actions Reducers React

Dalam aplikasi yang didukung Redux, arsitekturnya berkisar pada tiga konsep utama: Redux store, actions, dan reducers. Mari kita selidiki lebih dalam masing-masing konsep ini dan lihat bagaimana keduanya bekerja sama.

Redux Store

Redux store adalah satu sumber kebenaran yang menyimpan status lengkap aplikasi Anda. Ini pada dasarnya adalah objek JavaScript yang berisi data yang mewakili seluruh status aplikasi. Anda membuat store menggunakan createStore fungsi dari perpustakaan Redux.

Actions

Actions adalah objek JavaScript biasa yang menggambarkan sesuatu yang terjadi dalam aplikasi. Mereka membawa type bidang yang menunjukkan jenis tindakan yang dilakukan, dan data tambahan juga dapat dimasukkan. Actions dibuat menggunakan pembuat tindakan, yang merupakan fungsi yang mengembalikan objek tindakan. Misalnya:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers tentukan bagaimana status aplikasi berubah sebagai respons terhadap actions. Peredam adalah fungsi murni yang mengambil keadaan saat ini dan tindakan sebagai argumen dan mengembalikan keadaan baru. Reducers digabungkan menjadi satu peredam akar menggunakan combineReducers fungsi tersebut. Berikut ini contoh sederhananya:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

Bekerja bersama

Saat Anda mengirimkan tindakan menggunakan dispatch fungsi tersebut, Redux meneruskan tindakan tersebut ke semua reducers. Setiap peredam memeriksa apakah tipe tindakan cocok dengan tipe tindakannya sendiri dan memperbarui bagian status yang relevan. Status yang diperbarui kemudian disimpan di Redux store, dan semua komponen yang terhubung dirender ulang berdasarkan status baru.

Contoh Skenario

Bayangkan sebuah aplikasi daftar tugas. Saat pengguna menambahkan tugas baru, tindakan dikirim dengan jenis ADD_TODO dan teks tugas tersebut sebagai payload. Peredam semua tugas menerima tindakan ini, menambahkan tugas baru ke status, dan mengembalikan status yang diperbarui.

Kesimpulan

Memahami bagaimana Redux store, actions, dan reducers berinteraksi sangat penting untuk pengelolaan negara yang efektif. Arsitektur ini memastikan pemisahan masalah yang jelas dan memudahkan pengelolaan status aplikasi yang kompleks. Saat Anda terus mengembangkan Redux, konsep-konsep ini akan menjadi landasan strategi pengelolaan negara Anda.