แต่ละวันที่ผ่านไป#1 Redux

หลังจากที่ได้อ่านเรื่อง Redux และทำความเข้าใจเกี่ยวกับเรื่อง State management มากขึ้น จึงอยากเอามาย่อยที่นี่ดีกว่า

มีอยู่ 3 เรื่องที่อยากพูดถึง

1. Introduction
2. Concept
3. Workflow

Introduction

จริงๆเจ้า Redux หลายคนถ้าใช้ React คงรู้จักแหละ มันมีที่กำเนิดมาจาก Flux ที่ถูกพัฒนาจาก Facebook developer เพื่อแก้ปัญหา State ในแอพพลิเคชั่นที่ยุ่งเหยิงกันไปหมด ในตอนนั้น Flux มี Store ที่เก็บ State ไว้หลากหลายทำให้การจัดการ State ยังคงเป้นเรื่องที่วุ่นวายอยู่ โดย Flux สามารถให้นักพัฒนาคนอื่น ได้เข้าไปร่วมพัฒนาด้วย จนกระทั่งมี Project ที่ชื่อ Redux ที่พัฒนามาจาก Flux มีคนเข้ามาใช้ เนื่องจาก มันใช้งานง่ายโดยมี Store เดียวที่จัดการทั้งแอพพลิเคชั่น

Concept

ของมันคือเป็นที่จัดเก็บและบริหารจัดการ State ทั้งหมดที่อยู่ในแอพพลิเคชั่นของเราไว้ที่ถัง Store โดยที่ UI มีหน้าที่แค่เรียก Action บางอย่างไป โดยไม่ต้องเขียนโค้ดให้ไป Setstate ภายใน Components อีกต่อไป

Workflow

มันคือ MVC ที่ดัดแปลงมาจาก Flux นั่นเอง Model, Controuller, View สามารถแปลงได้ดังภาพ

https://dev.to/oahehc/redux-data-flow-and-react-component-life-cycle-11n

เมื่อมี Event เข้ามา จาก View จากถูกไปที่ Action เช่น Dispatcher ซึ่งเป็นตัวกลาง ระหว่าง Abstract function ของ Redux จากนั้น State จะเริ่มเปลี่ยนแปลงด้วย Function ที่ชื่อว่า Reducer และ สุดท้าย return เป็น state ที่ผ่านศัลยกรรมแล้ว

ซึ่งต่างจากวิธีจัดการบ้าน this.setState ซึ่ง Component ต้องทำหน้าที่จัดการ State เหล่านั้นเอง …

class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.click = this.click.bind(this);
        // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
        this.state = {
            greeting: 'Hello!'
        };
    }
    click(e) {
        this.setState({
              greeting: 'Hello World!'
        });
    }
    render() {
        return(
            <div>
                <p>{this.state.greeting}</p>
                <button onClick={this.click}>Click me</button>
            </div>
        );
    }
    
}

เรื่องของ แต่ละวันที่ผ่านไป ก็ประมาณนี้นะครับแฮะๆ ผิดพลาดประการใดขออภัย