ความ เข้าใจ และ ใน Redux Store Actions Reducers React

ในแอปพลิเคชันที่ขับเคลื่อน ด้วย Redux สถาปัตยกรรมจะหมุนรอบแนวคิดหลักสามประการ: Redux store, actions และ reducers มาเจาะลึกแต่ละแนวคิดเหล่านี้และดูว่าพวกเขาทำงานร่วมกันอย่างไร

Redux Store

Redux store เป็นแหล่งความจริงแหล่งเดียวที่เก็บสถานะที่สมบูรณ์ของใบสมัครของคุณ โดยพื้นฐานแล้วมันคือออบเจ็กต์ JavaScript ที่มีข้อมูลที่แสดงถึงสถานะแอปพลิเคชันทั้งหมด คุณสร้าง store โดยใช้ createStore ฟังก์ชันจากไลบรารี Redux

Actions

Actions เป็นวัตถุ JavaScript ธรรมดาที่อธิบายสิ่งที่เกิดขึ้นในแอปพลิเคชัน มี type ช่องที่ระบุประเภทของการกระทำที่กำลังดำเนินการ และสามารถรวมข้อมูลเพิ่มเติมได้เช่นกัน Actions ถูกสร้างขึ้นโดยใช้ผู้สร้างการกระทำซึ่งเป็นฟังก์ชันที่ส่งคืนออบเจ็กต์การกระทำ ตัวอย่างเช่น:

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

Reducers

Reducers ระบุว่าสถานะของแอปพลิเคชันเปลี่ยนแปลงไปอย่างไรเพื่อตอบสนอง actions ต่อ ตัวลดคือฟังก์ชันล้วนๆ ที่รับสถานะปัจจุบันและการดำเนินการเป็นอาร์กิวเมนต์และส่งกลับสถานะใหม่ Reducers จะรวมกันเป็นตัวลดรูทตัวเดียวโดยใช้ combineReducers ฟังก์ชัน นี่เป็นตัวอย่างง่ายๆ:

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

ทำงานร่วมกัน

เมื่อคุณส่งการดำเนินการโดยใช้ dispatch ฟังก์ชัน Redux จะส่งต่อการดำเนินการไปยังไฟล์ reducers. ตัวลดแต่ละตัวจะตรวจสอบว่าประเภทของการดำเนินการตรงกับของตัวเองหรือไม่ และอัปเดตส่วนที่เกี่ยวข้องของสถานะตามนั้น สถานะที่อัปเดตจะถูกจัดเก็บไว้ใน Redux store และส่วนประกอบที่เชื่อมต่อใดๆ จะแสดงผลอีกครั้งตามสถานะใหม่

สถานการณ์ตัวอย่าง

ลองนึกภาพแอปพลิเคชันรายการสิ่งที่ต้องทำ เมื่อผู้ใช้เพิ่มสิ่งที่ต้องทำใหม่ การดำเนินการจะถูกส่งไปพร้อมกับประเภท ADD_TODO และข้อความของสิ่งที่ต้องทำเป็นเพย์โหลด ตัวลดสิ่งที่ต้องทำได้รับการดำเนินการนี้ เพิ่มสิ่งที่ต้องทำใหม่ให้กับสถานะ และส่งคืนสถานะที่อัปเดต

บทสรุป

การทำความเข้าใจว่า Redux store, actions และ reducers โต้ตอบอย่างไรเป็นสิ่งสำคัญสำหรับการจัดการสถานะที่มีประสิทธิภาพ สถาปัตยกรรมนี้ช่วยให้มั่นใจได้ถึงการแยกข้อกังวลอย่างชัดเจน และทำให้ง่ายต่อการจัดการสถานะแอปพลิเคชันที่ซับซ้อน เมื่อคุณพัฒนาต่อไปด้วย Redux แนวคิดเหล่านี้จะสร้างรากฐานของกลยุทธ์การจัดการรัฐของคุณ