Pemahaman, dan dalam Redux Store Actions Reducers React

Dalam aplikasi berkuasa Redux, seni bina berkisar pada tiga konsep utama: Redux store, actions, dan reducers. Mari kita mendalami setiap konsep ini dan lihat cara ia berfungsi bersama.

Redux Store

Redux store ialah satu sumber kebenaran yang memegang keadaan lengkap permohonan anda. Ia pada asasnya objek JavaScript yang mengandungi data yang mewakili keseluruhan keadaan aplikasi. Anda mencipta store menggunakan createStore fungsi daripada perpustakaan Redux.

Actions

Actions ialah objek JavaScript biasa yang menerangkan sesuatu yang berlaku dalam aplikasi. Mereka membawa type medan yang menunjukkan jenis tindakan yang dilakukan, dan data tambahan boleh disertakan juga. Actions dicipta menggunakan pencipta tindakan, yang merupakan fungsi yang mengembalikan objek tindakan. Sebagai contoh:

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

Reducers

Reducers nyatakan bagaimana keadaan aplikasi berubah sebagai tindak balas kepada actions. Pengurang ialah fungsi tulen yang mengambil keadaan semasa dan tindakan sebagai hujah dan mengembalikan keadaan baharu. Reducers digabungkan menjadi pengurang akar tunggal menggunakan combineReducers fungsi tersebut. Berikut ialah contoh mudah:

// 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  
});  

Bekerjasama

Apabila anda menghantar tindakan menggunakan dispatch fungsi, Redux memajukan tindakan itu ke semua reducers. Setiap pengurang menyemak sama ada jenis tindakan itu sepadan dengan jenis tindakannya sendiri dan mengemas kini bahagian negeri yang berkaitan dengan sewajarnya. Keadaan yang dikemas kini kemudiannya disimpan dalam Redux store, dan mana-mana komponen yang disambungkan dipaparkan semula berdasarkan keadaan baharu.

Contoh Senario

Bayangkan aplikasi senarai tugasan. Apabila pengguna menambah todo baharu, tindakan dihantar dengan jenis ADD_TODO dan teks todo sebagai muatan. Pengurangan todos menerima tindakan ini, menambahkan todo baharu kepada keadaan dan mengembalikan keadaan yang dikemas kini.

Kesimpulan

Memahami cara Redux store, actions, dan reducers berinteraksi adalah penting untuk pengurusan negeri yang berkesan. Seni bina ini memastikan pemisahan kebimbangan yang jelas dan memudahkan untuk mengurus keadaan aplikasi yang kompleks. Semasa anda terus membangun dengan Redux, konsep ini akan membentuk asas strategi pengurusan negeri anda.