Frontend

chuyên mục lập trình Web Frontend

[NextJS + Nx Series] Setup Tailwind cho NextJS và Nx

by

Tiếp tục series tạo blog với NextJS và Nx, trong bài này mình sẽ giới thiệu phần tích hợp Tailwind Css vào dự án. Link bài viết gốc ở đây nhé: https://blog.nrwl.io/setup-next-js-to-use-tailwind-with-nx-849b7e21d8d0 Link bài viết trước Bạn cũng có thể tìm hiểu về Tailwind, cách cài đặt và cấu hình cho dự án NextJS ở … Read more

Giới thiệu về StoryBook cho dự án FrontEnd

by

Storybook là một công cụ thiết kế và phát triển những UI Components cho ứng dụng của bạn trên một môi trường hoàn toàn biệt lập. Storybook mang lại trải nghiện mới khi thiết kế những UI components tưởng chừng chỉ dừng lại ở khâu design trước khi chuyển sang giai đoạn code Frontend. Ngày nay khi phát … Read more

Những khái niệm cơ bản nhất về React

by

Đôi khi anh em lập trình code quá nhiều, join ngay vào project mà quên mất những khái niệm cơ bản nhất. Những khái niệm cơ bản như JSX, Components, Props, State, Fragment, … rất quen thuộc với mọi người nhưng đôi khi khó để định nghĩa hay trả lời 1 cách chính xác, nhất … Read more

Giới thiệu về Redux-Toolkit

by

Redux là 1 state management phổ biến trong hệ sinh thái React, nếu các bạn code React thì khả năng cao đã từng làm việc với Redux, kinh qua nhiều project hoặc chí ít cũng đã từng biết đến nó rồi. Redux được phát triển từ những năm 2015 và được ưa chuộng phổ biến … Read more

Memory Leaks, Làm thế nào để tránh trong ứng dụng React

by

Memory leak là gì? https://vi.wikipedia.org/wiki/R%C3%B2_r%E1%BB%89_b%E1%BB%99_nh%E1%BB%9B Theo Wikipedia, Memory leak (Rò rỉ bộ nhớ) là 1 loại rò rỉ tài nguyên xảy ra khi 1 chương trình máy tính quản lý không chính xác việc cấp phát bộ nhớ dẫn đến việc bộ nhớ đó không cần thiết nữa nhưng chưa được giải phóng (released). 1 … Read more

React Redux: Redux middleware là gì?

by

Để hiểu rõ hơn khái niệm Redux middleware, chúng ta cùng thử xử lý 1 bài toán như sau: Bạn cần phải ngăn chặn người dùng (users) không được sử dụng các từ khóa bị cấm (ví dụ như vl, vkl, cmnr, …) trong bài viết của họ. Để đơn giản thì mình sẽ xử … Read more

Phân biệt Shallow và Deep Copy trong JavaScript

by

Shallow trong tiếng Anh nghĩa là nông, cạn (có dấu phẩy nhé mn :v), phân biệt với Deep nghĩa là sâu. Bài viết này sẽ giúp các bạn hiểu và phân biệt được sự khác nhau giữa deep và shallow copy trong JavaScript JavaScript (JS) cũng giống như hầu hết các ngôn ngữ lập trình … Read more

Luồng dữ liệu trong Redux React

by

Redux là 1 pattern được dùng rất phổ biến hiện tại nhằm giải quyết vấn đề quản lý global state trong React, React Native (cũng được dùng nhiều trong các ngôn ngữ, thư viện khác).

Redux hình thành với 3 nguyên tắc cơ bản trong việc quản lý state:

  1. Tất cả các trạng thái của ứng dụng đều được lưu trữ từ 1 kho (được gọi là store)
  2. Các trạng thái đều phải và chỉ là read-only (tức là chỉ đọc, ko được phép cập nhật)
  3. Các thay đổi phải thông qua các pure functions (hàm thuần – tức là kết quả đầu ra chỉ phụ thuộc vào giá trị đầu vào)

Luồng dữ liệu (Data Flow) trong Redux sẽ được thực hiện như dưới hình sau:

Trong đó:

  • Store là nơi sẽ lưu giữ tất cả các biến state (global state)
  • UI (View) sẽ lấy các giá trị state từ store để hiển thị
  • UI View không trực tiếp cập nhật giá trị đến store mà phải thông qua các action
  • Action được thực hiện, gửi dữ liệu mới đến cho reducer thực hiện việc update state data vào trong store