สองแนวคิดพื้นฐานใน Redux

ก่อนที่จะเริ่มศึกษาคำสั่งไลบรารี Redux เรามาทำความรู้จักกับสองแนวคิดพื้นฐานของมันก่อน แนวคิดแรก ซึ่งเกี่ยวกับการจัดการสถานะ เราจะพิจารณาจากตัวอย่างตัวนับทั่วไป บน state ใน React:

jsxfunction Counter() {
  // State
  const [count, setCount] = useState(0)

  // Action:
  function clickHandler() {
    setCount(count + 1)
  }

  // View:
  return (
    <div>
      <span>{count}</span>
      <button onClick={clickHandler}>+</button>
    </div>
  )
}

ในโค้ดนี้เราเห็น state สำหรับตัวแปรcount - นี่คือ แหล่งที่มาของความจริงสำหรับตัวนับ จากนั้นเราเห็น การกระทำ (action) - เหตุการณ์ ซึ่งเมื่อผู้ใช้คลิกจะทำให้เกิด การอัปเดต state และสุดท้าย การแสดงผล (view) ซึ่งเราใช้แสดง ส่วนติดต่อผู้ใช้

ดังนั้นโครงร่างค่อนข้างง่าย: ปุ่มถูกกด - statecount (State) เมื่อกด (Action) เปลี่ยนแปลง ดังนั้น การแสดงผล (View) จึงเปลี่ยนแปลง - ในกรณีของเรา นั่นคือตัวเลขบนหน้าจอ

อย่างไรก็ตาม ทุกอย่างจะซับซ้อนขึ้นหากเรามีคอมโพเนนต์ จำนวนมากที่ต้องใช้ state เดียวกัน แน่นอนว่าเราสามารถทำได้ เช่น ยก state ขึ้น ไปยังคอมโพเนนต์ระดับพ่อแม่ แต่การแก้ไขนั้นไม่สามารถ แก้ปัญหาได้เสมอไป Redux ในกรณีนี้ เสนอให้เราสร้าง สถานที่เดียวในแอปพลิเคชัน ซึ่งจะเก็บสถานะส่วนกลาง และรูปแบบพฤติกรรมที่กำหนดไว้เมื่อ อัปเดตสถานะนั้น นี่คือสาระสำคัญ ของแนวคิดพื้นฐานแรก (!)

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