React, Inverse data flow, Redux, Relay

Xin chào mọi người Đến hẹn lại lên. Lần này mình sẽ tiếp tục giới thiệu về ReactJs. Nào bắt đầu thôi Nếu bạn là dev phát triển web sử dụng React thì kiểu gì cũng sẽ có lúc bạn phải giải bài toán làm sao kiểm soát được tất cả state của component ở client-side. Web hiện đại không thể chờ đợi được phản ứng từ server và cũng không thể lúc nào cũng gọi lại data từ database khi thay đổi trang. Do đó, lớp quản lý state được sinh ra hai thư viện được dùng nhiết nhất để quản lý lớp này là Redux và Relay.

Inverse data flow:

Nghĩa là xử lý luồng dữ liệu chạy ngược từ child -> parent Mình sẽ đưa ra 1 ví dụ:

var Form = React.createClass({
    render: function(){
        return (
            <div>
                <input type="submit" onClick={this.props.onUser} />
                <h3>Counter: {this.props.counter} times!</h3>
            </div>
        );
    }
});

var App = React.createClass({
    getInitialState: function(){
        return {
            counter: 0
        }
    },
    onUser: function(){
        var newCount = this.state.counter += 1;
        this.setState({
            counter: newCount
        });
    },
    render: function(){
        return (
            <div>
                <h1> Welcome to the counter app!</h1>
                <Form counter={this.state.counter} onUser={this.onUser} />
            </div>
        );
    }
});

React.render(<App />,  document.getElementById("app"));

Khi user click vào button Form sẽ trigger việc thay đổi trạng thái trong App và có thể truy xuất vào onUser Các component sẽ cung cấp API thông qua các thuộc tính của nó. Ví dụ, trong Form, nó sẽ gọi hàm truyền đến onUser. Components có thể tạo API bằng cách sử dụng propTypes Hash . Các thuộc tính bắt buộc có thể được khai báo bởi .isRequired.

Root Component

Bạn sẽ build 1 component root/parent component để xử lý tất cả các vấn đề mà ajax request Root component sẽ chưa các dữ liệu được gửi về trong state và chuyển nó xuống các component child và props Vậy khi nào nên sử dụng root component

• Bạn có một cây component k quá dài và sâu, để tránh việc xử lý qua nhiều subcomponent.
• Bạn không sử dụng Redux hay thông lượng.

Redux Async Actions

Vậy Redux là gì? Redux là một thư viện giúp bạn quản lí trạng thái (state) của application. Nó được thiết kế dựa trên Flux, nhưng giảm bớt những đau khổ thường gặp phải khi viết một ứng dụng Flux. Nếu bạn đã từng làm việc với Flux, bạn sẽ dễ dàng nhận ra rằng Redux đã xây dựng sẵn cho bạn rất nhiều thứ mà lẽ ra bạn tự phải làm. Ngoài ra, không giống như Flux, bạn có một state container duy nhất. Đó là một ưu điểm lớn, bởi vì nó sẽ giúp chia sẻ state và tái sử dụng code dễ dàng hơn. Trong Redux Async Actions: Redux là nơi quản lý dữ liệu và Ajax sẽ cung cấp dữ liệu tới server. Redux manages data, and AJAX provides data from the server. Nếu các bạn đang sử dụng Redux thì các bạn không nên đặt Ajax trong component của React. Thay vào đó hãy đặt nó vào Async Actions

Relay (Rơ Le)

Với Relay bạn sẽ khai báo dữ liệu mà bạn cận trong các component React với GraphQL và Relay sẽ tự động tại dữ liệu đó về và fills out nó vào các component props Relay hoạt động tốt với những dự án lớn Vậy GraphQL là gì? GraphQL cung cấp 1 giao thức chung cho phép giao tiếp giữa client và server để cập nhật và lấy dữ liệu Client truy vấn đến máy chủ GraphQL bằng các truy vấn với đặc điểm: format của dữ liệu trả về được mô tả trong câu truy vấn và được định nghĩa ở phía client thay vì ở server. Nói đơn giản hơn, đây là truy vấn hướng client, cấu trúc dữ liệu không khô cứng 1 khuôn mẫu từ server (REST API) mà thay đổi theo từng ngữ cảnh sao cho hiệu quả nhất đối với client mà chỉ cần dùng duy nhất 1 endpoint. Vậy khi nào thì nên sử dụng Relay

• Bạn đang xây dựng 1 dự án lớn và gặp phải 1 số vấn đề mà Relay được xây dựng để giải quyết
• Ví dụ như: khắc phục điểm yếu của của REST API bởi REST có tính chất dựa trên tài nguyên cố định
• Bạn chưa Setup Api Json
• Bạn có 1 máy chủ GraphQL
• Dự án của bạn sẽ chỉ được thực hiện trên 1 server duy nhất

Cảm ơn các bạn đã theo dõi bài viết