State Management Library: Redux คืออะไร?

State Management Library: Redux คืออะไร?

หลังจากที่เราได้รู้จักกับ useState สำหรับ Local State และ Context API สำหรับ Global State ขนาดเล็กไปแล้ว ในบทนี้เราจะมาทำความรู้จักกับ Redux ซึ่งเป็น Library ที่ได้รับความนิยมอย่างมากในการจัดการ Global State ที่มีความซับซ้อนและมีขนาดใหญ่ขึ้น

Redux คืออะไร?

Redux คือ Library สำหรับจัดการ State (สถานะ) ของแอปพลิเคชัน โดยเฉพาะอย่างยิ่งแอปพลิเคชัน Frontend ที่มีขนาดใหญ่และซับซ้อน Redux ช่วยให้การจัดการ State เป็นไปอย่างมีระเบียบแบบแผน คาดเดาได้ง่าย และง่ายต่อการ Debug (แก้ไขข้อผิดพลาด) สิ่งสำคัญคือ Redux เป็น Library ที่สามารถใช้ได้กับ Framework หรือ Library Frontend อื่นๆ ไม่ได้จำกัดอยู่แค่ React เท่านั้น (แม้ว่าส่วนใหญ่จะใช้คู่กับ React)

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

ทำไมต้อง Redux? (อีกครั้ง)

Context API เป็นเครื่องมือที่ดีสำหรับ Global State ขนาดเล็กถึงกลาง แต่เมื่อแอปพลิเคชันของคุณเริ่มใหญ่ขึ้น มี Component มากมายที่ต้องแชร์ State เดียวกัน และ Logic ในการจัดการ State เริ่มซับซ้อน Context API อาจจะไม่เพียงพออีกต่อไป

ปัญหาที่ Redux เข้ามาช่วยแก้ไข:

• Prop Drilling ที่ซับซ้อน: เมื่อ Component ลำดับชั้นลึกๆ ต้องการเข้าถึง State ที่อยู่ใน Component ระดับบนสุด เราต้องส่ง Props ผ่าน Component ระหว่างทางมากมาย ทำให้โค้ดอ่านยากและดูแลรักษายาก
• การจัดการ State ที่กระจายตัว: State อาจถูกแก้ไขจากหลายที่ ทำให้ยากต่อการติดตามว่า State เปลี่ยนแปลงไปอย่างไร
• Debugging ที่ยาก: เมื่อเกิดปัญหาขึ้นกับ State เราอาจไม่รู้ว่าจุดเริ่มต้นของปัญหาอยู่ที่ไหน

Redux ช่วยแก้ปัญหาเหล่านี้ด้วยการสร้าง Single Source of Truth (แหล่งความจริงเพียงหนึ่งเดียว) ซึ่งหมายความว่า State ทั้งหมดของแอปพลิเคชันจะถูกเก็บไว้ในที่เดียว (Store) และการเปลี่ยนแปลง State จะต้องผ่านกระบวนการที่กำหนดไว้ ทำให้เราสามารถควบคุมและติดตามการเปลี่ยนแปลง State ได้อย่างมีประสิทธิภาพ

หลักการทำงานของ Redux

Redux ทำงานโดยอาศัยหลักการพื้นฐาน 3 อย่าง:

1. Store: คือที่เก็บ State ทั้งหมดของแอปพลิเคชัน เปรียบเสมือนฐานข้อมูลเล็กๆ ที่อยู่ใน Frontend
2. Reducer: คือ Function ที่กำหนดวิธีการเปลี่ยนแปลง State โดยขึ้นอยู่กับ Action ที่ได้รับ Reducer เป็น Function ที่ Pure นั่นคือรับ Input (State ปัจจุบันและ Action) แล้วคืนค่า Output (State ใหม่) โดยไม่มีผลข้างเคียงใดๆ
3. Action: คือ Object ที่บรรยายถึงสิ่งที่เกิดขึ้นในแอปพลิเคชัน เช่น "เพิ่มสินค้าลงในตะกร้า" หรือ "เปลี่ยน Theme ของเว็บไซต์" Action จะถูกส่งไปยัง Reducer เพื่อให้ Reducer ทำการเปลี่ยนแปลง State ที่เกี่ยวข้อง

ลองมาดูภาพรวมการทำงานของ Redux:

1. Component ส่ง Action ไปยัง Store
2. Store ส่ง Action ไปยัง Reducer
3. Reducer ทำการเปลี่ยนแปลง State ตาม Action ที่ได้รับ และคืนค่า State ใหม่
4. Store ทำการ Update State ด้วย State ใหม่ที่ได้รับจาก Reducer
5. Component ที่ Subscribe (สมัครรับข้อมูล) กับ State นั้นๆ จะได้รับการแจ้งเตือน และทำการ Re-render (วาดใหม่) เพื่อแสดงผล State ที่ Update แล้ว

เพื่อให้เห็นภาพชัดเจนขึ้น ลองดูตัวอย่างโค้ด (React + Redux):

// Action Types (ค่าคงที่สำหรับชื่อ Action)
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

// Action Creators (Function สร้าง Action)
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

function toggleTodo(index) {
  return {
    type: TOGGLE_TODO,
    index
  }
}

// Reducer (Function เปลี่ยน State)
const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, { text: action.text, completed: false }]
      };
    case TOGGLE_TODO:
      const newTodos = [...state.todos];
      newTodos[action.index].completed = !newTodos[action.index].completed;
      return {
        ...state,
        todos: newTodos
      };
    default:
      return state;
  }
}

// Store (ที่เก็บ State)
import { createStore } from 'redux';
const store = createStore(todoReducer);

// Component (React Component)
import React from 'react';
import { connect } from 'react-redux';

function TodoList({ todos, addTodo, toggleTodo }) {
  return (
    <div>
      <input type="text" onKeyDown={(e) => {
        if (e.key === 'Enter') {
          addTodo(e.target.value);
          e.target.value = '';
        }
      }} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index} onClick={() => toggleTodo(index)}
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Connect (เชื่อมต่อ Component กับ Redux Store)
const mapStateToProps = (state) => ({
  todos: state.todos
});

const mapDispatchToProps = (dispatch) => ({
  addTodo: (text) => dispatch(addTodo(text)),
  toggleTodo: (index) => dispatch(toggleTodo(index))
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

// การใช้งานใน App.js
import { Provider } from 'react-redux';
import TodoList from './TodoList';

function App() {
  return (
    <Provider store={store}>
      <TodoList />
    </Provider>
  );
}

export default App;

โค้ดนี้เป็นตัวอย่างง่ายๆ ของแอปพลิเคชัน Todo List ที่ใช้ Redux ในการจัดการ State จะเห็นว่าเรามีการกำหนด Action Types, Action Creators, Reducer และ Store อย่างชัดเจน Component TodoList เชื่อมต่อกับ Redux Store ผ่าน connect และสามารถ Dispatch (ส่ง) Action เพื่อเปลี่ยนแปลง State ได้

คำอธิบายเพิ่มเติม:

• Action Types: เป็นค่าคงที่ (Constant) ที่ใช้ระบุ Action แต่ละประเภท การใช้ค่าคงที่ช่วยป้องกันการพิมพ์ผิด และทำให้โค้ดอ่านง่ายขึ้น
• Action Creators: เป็น Function ที่สร้าง Action Object การใช้ Action Creators ช่วยให้เราไม่ต้องสร้าง Action Object เองทุกครั้ง
• ...state (Spread Operator): ใช้เพื่อคัดลอก State เดิมก่อนที่จะทำการเปลี่ยนแปลง เป็นแนวทางปฏิบัติที่ดีเพื่อให้แน่ใจว่าเราไม่ได้เปลี่ยนแปลง State เดิมโดยตรง (Immutability)
• createStore: เป็น Function จาก Redux ที่ใช้สร้าง Store โดยรับ Reducer เป็น Argument
• connect: เป็น Function จาก react-redux ที่ใช้เชื่อมต่อ Component กับ Redux Store
• mapStateToProps: เป็น Function ที่กำหนดว่า State ส่วนไหนจาก Redux Store ที่ Component ต้องการใช้
• mapDispatchToProps: เป็น Function ที่กำหนดว่า Action Creators ตัวไหนที่ Component ต้องการ Dispatch
• Provider: เป็น Component จาก react-redux ที่ทำให้ Redux Store สามารถเข้าถึงได้จากทุก Component ในแอปพลิเคชัน

ข้อดีข้อเสียของ Redux

ข้อดี:

• Centralized State Management: State ทั้งหมดถูกเก็บไว้ในที่เดียว ทำให้ง่ายต่อการจัดการและติดตาม
• Predictable State Updates: การเปลี่ยนแปลง State ต้องผ่าน Reducer ทำให้เราสามารถคาดเดาได้ว่า State จะเปลี่ยนแปลงไปอย่างไร
• Easy Debugging: Redux DevTools ช่วยให้เราสามารถ Debug แอปพลิเคชัน Redux ได้อย่างมีประสิทธิภาพ โดยสามารถดู Action ที่ถูก Dispatch และ State ที่เปลี่ยนแปลงไป
• Scalability: Redux เหมาะสำหรับแอปพลิเคชันขนาดใหญ่ที่มีความซับซ้อน
• Time Travel Debugging: (ด้วย Redux DevTools) สามารถย้อนเวลากลับไปดู State ในอดีตได้ ทำให้ง่ายต่อการ Debug

ข้อเสีย:

• Boilerplate Code: Redux ต้องใช้โค้ดจำนวนมากในการ Setup (ตั้งค่า) และใช้งาน (Action Types, Action Creators, Reducers)
• Complexity: Redux อาจจะซับซ้อนเกินความจำเป็นสำหรับแอปพลิเคชันขนาดเล็ก
• Steep Learning Curve: การเรียนรู้ Redux ต้องใช้เวลาและความพยายาม

สรุป

Redux เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการจัดการ Global State ที่มีความซับซ้อนและมีขนาดใหญ่ แต่ก็มาพร้อมกับความซับซ้อนและ Boilerplate Code ที่มากขึ้น ก่อนที่จะตัดสินใจใช้ Redux ควรพิจารณาขนาดและความซับซ้อนของแอปพลิเคชันของคุณอย่างรอบคอบ ถ้าแอปพลิเคชันของคุณมีขนาดเล็ก Context API อาจจะเป็นทางเลือกที่เหมาะสมกว่า แต่ถ้าแอปพลิเคชันของคุณมีขนาดใหญ่และต้องการการจัดการ State ที่มีระเบียบแบบแผน Redux คือตัวเลือกที่น่าสนใจ

ในบทถัดไป เราจะมาเปรียบเทียบเครื่องมือ State Management ต่างๆ ที่เราได้เรียนรู้มา (useState, Context API, และ Redux) เพื่อให้คุณสามารถเลือกใช้เครื่องมือที่เหมาะสมกับโปรเจกต์ของคุณได้อย่างมั่นใจ