React

Các bài viết dành cho thư viện React, framework React Native

React Redux: Giới thiệu Redux Thunk.

by

Ở bài viết trước chúng ta đã biết được Redux middleware là gì, và vấn đề gặp phải với lỗi: “Error: Actions must be plain objects. Use custom middleware for async actions” khi chúng ta cần xử lý các action bất đồng bộ như lấy dữ liệu từ API. Link bài viết trước mọi người có thể … Read more

Redux Toolkit: Tìm hiểu createSlice

by

Tiếp theo bài trước, mình sẽ giới thiệu chi tiết hơn các API cơ bản của Redux-Toolkit để chúng ta có thể tạo được 1 flow hoàn chỉnh của Redux. Redux Module Trong Redux, 1 module hoàn chỉnh bao gồm: Store, Actions và Reducer, thông thường các bạn sẽ chia viết từng phần trong các … Read more

Tư duy của React Hooks

by

React Hooks những năm 2022 khi mình viết bài viết này gần như đã trở thành 1 kĩ năng “must to have” đối với các lập trình viên Frontend React. Các bạn có thể đọc tài liệu chính thức về Hook trên trang chủ của React: https://reactjs.org/docs/hooks-intro.html. Trong bài viết này, mình chỉ nói 1 … 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

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