The React Bootcamp: Redux

Phần 1: Props và state

1. Props:

#Keyword: Bất biến
Là loại dữ liệu được truyền từ component cha xuống component con. Props không thể thay đổi ở component con. Nếu muốn thay đổi phải thay đổi ở component cha.
Gán giá trị của Props từ Component cha cho Component con chúng ta chỉ cần thêm các thuộc tính như sau:

2. State:

Phần 2: Redux

1. Redux để làm gì:

#Keyword: "managing and centralizing application state"

Truyền dữ liệu từ component A sang component C thì bắt buộc phải thông qua component B. Redux sẽ giải quyết một bài toán khá là quan trọng đó là chia sẻ state. Redux giúp cho việc quản lí trạng thái component một cách tập trung và đơn giản hơn.

2. Các thành phần của Redux

3 thành phần cơ bản:
+Store:

- Lưu trữ trang thái ứng dụng và phân phối cho các components.

- Dispatch là một thành phần quan trọng của store, có nhiệm vụ kích hoạt xử lí bên trong reducer. Sau khi được xử lí thành công, các trạng thái mới sẽ được cập nhật lại store.

+Actions:

- Hành động hay sự kiện làm thay đổi trạng thái. Chúng có thể là call API hoặc submit form

"action objects describe what happened, and dispatching them to the store"

Một action chỉ đơn giản là một đối tượng như sau:

{
    type: "SOME_ACTION",
    payload: {}
}

+Reducers:

- Người dùng có thể access các state đã được lưu, update hoặc đăng ký cũng như hủy đăng ký các listeners thông qua helper methods.

Ví dụ state:

import React from "react";

class CounterPage extends React.Component {
    constructor(props) { // properties => kho
        super(props)
        this.decrease = this.decrease.bind(this);
        this.increase = this.increase.bind(this); //React Bind Pattern
        this.check = this.check.bind(this);
    }
    state = {
        count: 0
    }

    increase() {
        this.setState(
            {
                count: this.state.count +1 // +1 || ++
            }
        )
    }

    decrease() {
        this.setState(
            {
                count: this.state.count -1
            }
        )
    }

    check() {
        if(this.state.count > 10 ) {
            console.log("Uyen luoi lam bai tap")
        }
    }

    render() {
        return (
             

                 -
                 {this.state.count}
                 +
                 Check
            
 
        );
    }
}

export default CounterPage;

import React from "react";
import {connect} from 'react-redux'
class CounterPage extends React.Component {
    constructor(props) { // properties => kho
        super(props)
        this.decrease = this.decrease.bind(this);
        this.increase = this.increase.bind(this); //React Bind Pattern
        this.check = this.check.bind(this);
    }

    increase() {
       
    }

    decrease() {
        
    }

    check() {
        if(this.state.count > 10 ) {
            console.log("Uyen luoi lam bai tap")
        }
        //
        // bai tap:
        // - Kiem tra so am => set count = 0 
        // - Neu lon hon >10 => set count = 10

        // - Moi lan nhan cong hoac tru thi tinh cac so tu 0 -> so hien tai 
        // VD: 5 => 1 + 2 +3 +4 +5 = ...
        // count 1 => SUM =1
        // count 3 => SUM = 1 +2 +3
    }

    render() {
        return (
             

                 -
                 {this.props.count}
                 +
                 Check
            
 
        );
    }
}

function mapState(state) {
    return {
        count: state.counter
    }
}
export default connect(mapState)(CounterPage);

Reference:

https://freetuts.net/redux-la-gi-tai-sao-lai-ung-dung-trong-reactjs-2618.html
https://viblo.asia/p/redux-basic-va-ly-do-tai-sao-chung-ta-khong-su-dung-lifting-state-up-de-xu-ly-va-luu-tru-state-4P856N7W5Y3