Fluxor là một thư viện giúp quản lý trạng thái (State Management) một cách chặt chẽ và dễ dự đoán. Để hiểu cách nó hoạt động, chúng ta hãy nhìn vào luồng dữ liệu sau: 1. Luồng hoạt động graph LR A[UI / View] -- Dispatch --> B(Action) B --> C{Dispatcher} C --> D[Reducer] E[(Current State)] --> D D -- Create New --> F[(New State)] F --> A Hiểu đơn giản: State (Trạng thái): Là dữ liệu duy nhất và không thể thay đổi (immutable) đại diện cho một phần của ứng dụng. Action (Hành động): Một thông điệp gửi đi để yêu cầu thay đổi trạng thái. Nó không chứa logic, chỉ chứa dữ liệu cần thiết. Reducer (Bộ chuyển đổi): Một hàm thuần túy (pure function) nhận vào State cũ + Action và trả về một State mới. Dispatcher (Bộ điều phối): Công cụ dùng để gửi Action vào hệ thống. State State trong Blazor là dữ liệu hiện tại của ứng dụng tại một thời điểm cụ thể (ví dụ: giỏ hàng, thông tin đăng nhập, biến Lưu ý: Không ai được sửa State trực tiếp. Tại sao Sta...
State trong Blazor là một trong những khái niệm quan trọng nhất. Nếu hiểu đúng, bạn sẽ thấy Blazor rất "mượt"; nếu hiểu sai, code sẽ nhanh chóng thành… mì gói 🍜. Bài này đi từ ví dụ đơn giản nhất (click button) đến các pattern nâng cao như StateContainer, PersistentState, Fluxor và Undo/Redo. 1. State là gì? State = dữ liệu hiện tại của ứng dụng tại một thời điểm. Ví dụ: Counter = 5 User đã đăng nhập Giỏ hàng có 3 sản phẩm UI luôn được render dựa trên state. 2. Ví dụ cơ bản nhất: Click Counter Counter.razor <h3>Counter</h3> <p>Current count: @count</p> <button @onclick="Increment">Click me</button> @code { int count = 0; void Increment() { count++; } } Điều gì đang xảy ra? Flow rất đơn giản: User click ↓ Increment() ↓ count thay đổi ↓ Blazor re-render UI Đây chính là nền tảng: UI = f(state) 3. Khi state nằm trong component Cách trên hoạt động tốt khi: S...