Giới thiệu
Redux là một thư viện quản lý trạng thái cho ứng dụng web JavaScript. Nó được sử dụng chủ yếu trong các ứng dụng React, nhưng cũng có thể được tích hợp vào các framework hoặc thư viện khác.
Redux giúp bạn quản lý trạng thái của ứng dụng một cách dễ dàng và dự đoán được. Trạng thái của ứng dụng được lưu trữ trong một cấu trúc dữ liệu gọi là "store." Store có thể hiểu đơn giản là một đối tượng chứa toàn bộ trạng thái của ứng dụng. Thay vì lưu trạng thái trong các thành phần riêng lẻ, Redux tạo ra một cơ chế duy nhất để truy cập và cập nhật trạng thái này.
Khi nào mới nên sử dụng Redux
- State được truyền dưới dạng prop cho nhiều hơn hai component hoặc các cấp độ của các component.
- Cùng một state được sử dụng bởi các component không có mối quan hệ cha-con.
- Lưu trữ tạm state trang. Ví dụ - khi người dùng điều chỉnh trang tin tức và quay lại trang tin tức cũ, trang tin tức cũ vẫn hoạt động ở trạng thái như ban đầu.
- Khi state thay đổi, các component liên quan đến state có thể được thay đổi đồng thời.
Video học lập trình Redux
Redux được tạo ra như thế nào?
Redux gồm các thành phần chính:
- Actions
- Reducers
- Store
1) Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app đến Redux store. Những data này có thể là từ sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission.
- Actions được gửi bằng cách sử dụng store.dispatch() method, chúng phải có một type property để biểu lộ loại action để thực hiện. Chúng cũng phải có một payload chứa thông tin. Actions được tạo thông qua một action creator
Ví dụ:
const addItemAction = {
type: 'ADD_ITEM',
payload: {
name: 'Milk',
quantity: 1
}
}
dispatch(addItemAction);
2) Reducer là các function nguyên thủy chúng lấy state hiện tại của app, thực hiện một action và trả về một state mới. Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store.
Ví dụ:
// Định nghĩa reducer để xử lý các action liên quan đến số lượng
const counterReducer = (state = initialState, action) => {
switch(action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'DECREMENT':
return {
...state,
count: state.count - 1
};
default:
return state;
}
}
3) Store là một đối tượng JavaScript và là một kho chứa trung tâm quản lý trạng thái, có thể truy cập từ toàn bộ ứng dụng. Phương thức duy nhất để truy cập vào store là thông qua việc gửi action.
Ví dụ:
import { createStore } from 'redux';
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
const store = createStore(counter);
store.subscribe(() => console.log(store.getState()))
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })
- dispatch(action): Gửi một action đến Redux store để xử lý.
- getState(): Trả về state hiện tại của Redux store.
- subscribe(listener): Đăng ký một hàm lắng nghe để được gọi mỗi khi state của Redux thay đổi.
Nguyên lý vận hành
Cách thức hoạt động redux
Ngoài redux, chúng ta còn có một thư viện quản lí state là mobx
https://github.com/mobxjs/mobx
Mô hình hoạt động của mobx
Cũng giống như redux nhưng cách viết thoải mái hơn, ít có ràng buộc chặt chẽ hơn. Mobx viết ít code hơn. Mobx viết theo object-oriented programming, redux viết theo procedural programming. Mobx dùng two-way data binding (MVVM) còn redux one-way data binding.
Tổng kết
Trong bài viết này, chúng ta đã tìm hiểu về Redux và cách sử dụng nó trong React. Chúng ta đã phát triển một ứng dụng Calculator đơn giản sử dụng Redux để quản lý trạng thái và cho phép các thành phần liên quan truy cập các giá trị đó. Tuy nhiên, Redux không phải là giải pháp cho tất cả các dự án. Nó được sử dụng trong các trường hợp khi bạn cần quản lý trạng thái toàn cục của ứng dụng hoặc khi có nhiều thành phần liên quan đến nhau cần truy cập vào cùng một trạng thái.
