Chuyển đến nội dung chính

Sử dụng Mobx để quản lý state thay cho redux trong React

Trong React, MobX là một thư viện quản lý trạng thái (state management) dựa trên kiến trúc observable-reactive. Nó cung cấp một cách đơn giản để quản lý trạng thái ứng dụng của bạn và tạo ra các thành phần UI linh hoạt và dễ bảo trì.

Để sử dụng MobX trong React, bạn cần cài đặt các gói MobX, MobX React và React DOM:
css
npm install mobx mobx-react react-dom --save

Sau đó, tạo một đối tượng trạng thái (state object) sử dụng MobX:

javascript
import { makeObservable, observable, action } from 'mobx'; class AppState { count = 0; constructor() { makeObservable(this, { count: observable, increment: action, decrement: action, }); } increment() { this.count++; } decrement() { this.count--; } } export default new AppState();


Trong ví dụ này, đối tượng AppState chứa một thuộc tính count và hai phương thức increment và decrement, tăng và giảm giá trị của count.

Sau đó, sử dụng đối tượng AppState trong thành phần React:
javascript
import { observer } from 'mobx-react'; import appState from './appState'; const Counter = observer(() => { const handleIncrement = () => { appState.increment(); }; const handleDecrement = () => { appState.decrement(); }; return ( <div> <h1>Count: {appState.count}</h1> <button onClick={handleIncrement}>+</button> <button onClick={handleDecrement}>-</button> </div> ); }); export default Counter;


Ở đây, chúng ta đã sử dụng observer để đảm bảo rằng thành phần được cập nhật khi trạng thái của đối tượng AppState thay đổi. Khi appState.count thay đổi, MobX sẽ tự động gửi thông báo đến observer, giúp cập nhật giao diện người dùng một cách đúng thời điểm.

Đó là một ví dụ cơ bản về cách sử dụng MobX trong React để quản lý trạng thái ứng dụng. Bạn có thể tìm hiểu thêm về MobX và cách sử dụng nó trong React tại trang chủ của MobX.

Nhận xét

Bài đăng phổ biến từ blog này

giới thiệu về appwrite một nền tảng tuyệt vời cho BAAS

Appwrite là một nền tảng Backend-as-a-Service (BaaS) mã nguồn mở, cung cấp các giải pháp cho việc phát triển ứng dụng di động và web. Appwrite cung cấp các tính năng như quản lý người dùng, lưu trữ dữ liệu, xác thực và bảo mật, phân tích thống kê và nhiều hơn nữa. Appwrite hỗ trợ nhiều ngôn ngữ lập trình, cho phép người phát triển sử dụng các ngôn ngữ phổ biến như JavaScript, Node.js, Flutter và nhiều ngôn ngữ khác. Ngoài ra, Appwrite còn có tính năng Webhooks, cho phép kết nối ứng dụng với các dịch vụ khác như Slack, Discord và nhiều dịch vụ khác. Appwrite cung cấp các giao diện lập trình ứng dụng (API) cho phép các nhà phát triển xây dựng ứng dụng di động và web linh hoạt và dễ dàng hơn. Appwrite cũng cung cấp các SDK cho nhiều ngôn ngữ lập trình để giúp các nhà phát triển tích hợp Appwrite vào các ứng dụng của mình một cách nhanh chóng và dễ dàng. Với sự phát triển của Appwrite, người dùng có thể dễ dàng tạo, quản lý và triển khai các ứng dụng di động và web một cách dễ dàng và hiệ

Giới thiệu về strapi

Strapi là một CMS mã nguồn mở và đa nền tảng được phát triển bằng Node.js, giúp cho việc xây dựng các ứng dụng web hoặc mobile trở nên dễ dàng hơn. Strapi được thiết kế để cung cấp cho các nhà phát triển một hệ thống quản lý dữ liệu linh hoạt và dễ dàng cấu hình, đồng thời hỗ trợ nhiều loại cơ sở dữ liệu khác nhau như MongoDB, MySQL, PostgreSQL, SQLite và SQL Server. Với Strapi, người dùng có thể tạo các API linh hoạt cho các ứng dụng của mình, bao gồm các chức năng như đăng ký, đăng nhập, quản lý nội dung và quản lý người dùng. Strapi cũng cung cấp cho người dùng các tính năng như xác thực dựa trên JWT, quản lý phiên làm việc, quản lý phân quyền và phân quyền tùy chỉnh. Một trong những ưu điểm của Strapi là tính linh hoạt và dễ dàng mở rộng. Với Strapi, người dùng có thể tùy chỉnh các API của mình bằng cách sử dụng các plugin, middleware hoặc cách thức xây dựng theo yêu cầu của mình. Ngoài ra, Strapi cũng có một cộng đồng đông đảo và hỗ trợ tốt, giúp cho việc sử dụng và phát triển Str

Triển khai dự án Laravel với Github Actions CI/CD hiệu quả và đơn giản nhất

Nếu bạn đã từng triển khai laravel hoặc các framework tương tự lên trên server (hosting) thì có khác nhiều cách làm. Các thủ công nhất là zip toàn bộ source sau đó upload lên và unzip ra hoặc sử dụng ftp để upload nếu server, ... Quá trình rất mất nhiều công sức và rất thủ công làm lãng phí khá nhiều thời gian chỉ để chờ ngồi xem file được up lên sau đó nếu có file nào được edit hoặc tìm đúng file đó up lên,... Đấy là chưa kể update thêm package thì khá rắc rối. Các chuyên gia công nghệ  lại nghĩ ra một giải pháp CI/CD ( CI (Continuous Integration) và CD (Continuous Delivery) - tích hợp thường xuyên ) giúp cho quá trình deploy test, dev, production một cách nhanh chóng và tự động hoàn toàn. Bạn dev chỉ cần code xong thấy ok push lên git. Các công cụ CI/CD tự động kiểm tra thấy có push mới là tự động chạy build code sau đó copy vào đúng thư mục cần run một cách hoàn chỉnh nhanh c