Giới thiệu

Redux là một thư viện quản lý trạng thái toàn cục, giúp lưu trữ và quản lý trạng thái của ứng dụng một cách hiệu quả. Trong bài viết này, chúng ta sẽ tìm hiểu về Redux từ những khái niệm cơ bản nhất đến cách tích hợp nó vào ứng dụng React.

Mục lục

1. Redux là gì?
2. Các khái niệm cơ bản trong Redux
3. Ví dụ đầu tiên (Chỉ dùng JavaScript)
4. Redux với React
5. Sử dụng bindActionCreators
6. Các phương pháp tốt nhất
7. Những cạm bẫy thường gặp
8. Mẹo tối ưu hiệu suất
9. Khắc phục sự cố
10. Câu hỏi thường gặp

Redux là gì?

Redux là một thư viện quản lý trạng thái toàn cục. Nó cho phép bạn:

• Lưu trạng thái chia sẻ của ứng dụng trong một store duy nhất.
• Các thành phần có thể đọc và cập nhật trạng thái mà không cần phải truyền props qua nhiều cấp độ.

👉 Hãy nghĩ về Redux như một "remote control" mà tất cả các thành phần đều có thể sử dụng để truy cập và sửa đổi trạng thái.

Các khái niệm cơ bản trong Redux

1. Store
   Là nơi lưu trữ trạng thái toàn cục của ứng dụng.

2. Action
   Là một đối tượng mô tả hành động bạn muốn thực hiện. Ví dụ:

   javascript Copy

   { type: "INCREMENT" }

3. Reducer
   Là một hàm thuần túy cho biết trạng thái sẽ thay đổi như thế nào tùy thuộc vào hành động. Ví dụ:

   javascript Copy

   function counterReducer(state = { count: 0 }, action) {
       switch (action.type) {
           case "INCREMENT":
               return { count: state.count + 1 };
           case "DECREMENT":
               return { count: state.count - 1 };
           default:
               return state;
       }
   }

4. Dispatch
   Là hàm dùng để gửi một action đến store để reducer xử lý.

Ví dụ đầu tiên (Chỉ dùng JavaScript)

import { createStore } from "redux";

// Reducer
function counterReducer(state = { count: 0 }, action) {
   switch (action.type) {
       case "INCREMENT":
           return { count: state.count + 1 };
       case "DECREMENT":
           return { count: state.count - 1 };
       default:
           return state;
   }
}

// Tạo store
const store = createStore(counterReducer);

// Đăng ký theo dõi thay đổi
store.subscribe(() => {
   console.log("Trạng thái mới:", store.getState());
});

// Gửi các hành động
store.dispatch({ type: "INCREMENT" }); // Trạng thái mới: { count: 1 }
store.dispatch({ type: "INCREMENT" }); // Trạng thái mới: { count: 2 }
store.dispatch({ type: "DECREMENT" }); // Trạng thái mới: { count: 1 }

Redux với React

Cài đặt

npm install @reduxjs/toolkit react-redux

Ngày nay, chúng ta nên sử dụng Redux Toolkit vì nó giúp đơn giản hóa cú pháp rất nhiều.

Bước 1: Tạo một slice (trạng thái + reducer + actions)

// store/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
   name: "counter",
   initialState: { value: 0 },
   reducers: {
       increment: (state) => { state.value += 1; },
       decrement: (state) => { state.value -= 1; },
   },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Bước 2: Cấu hình store

// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
   reducer: {
       counter: counterReducer,
   },
});

Bước 3: Bọc ứng dụng với Provider

// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
       <App />
   </Provider>
);

Bước 4: Sử dụng Redux trong một thành phần

// App.jsx
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./store/counterSlice";

export default function App() {
   const count = useSelector((state) => state.counter.value); // đọc trạng thái
   const dispatch = useDispatch(); // để gửi hành động

   return (
       <div>
           <h1>Đếm: {count}</h1>
           <button onClick={() => dispatch(increment())}>+1</button>
           <button onClick={() => dispatch(decrement())}>-1</button>
       </div>
   );
}

✅ Bây giờ bộ đếm của bạn đã hoạt động với Redux. Tất cả các thành phần sử dụng useSelector để đọc counter.value sẽ nhận được trạng thái cập nhật tự động.

Các phương pháp tốt nhất

• Sử dụng Redux Toolkit: Giúp giảm thiểu mã lặp lại và cấu hình phức tạp.
• Tổ chức mã nguồn một cách hợp lý: Tạo từng slice cho mỗi phần của ứng dụng để dễ dàng quản lý.

Những cạm bẫy thường gặp

• Không sử dụng memoization, điều này có thể dẫn đến hiệu suất kém trong các ứng dụng lớn.
• Không theo dõi trạng thái chính xác có thể dẫn đến lỗi không mong muốn.

Mẹo tối ưu hiệu suất

• Sử dụng createSelector từ reselect để tối ưu hóa việc lấy trạng thái.
• Tránh cập nhật trạng thái không cần thiết, chỉ gọi dispatch khi thực sự cần thiết.

Khắc phục sự cố

Nếu bạn gặp vấn đề với Redux, hãy chắc chắn rằng:

• Đã cấu hình đúng Provider.
• Các hành động được gửi đúng cách và reducer đang xử lý chúng.

Câu hỏi thường gặp

1. Redux có thể sử dụng với Angular không?
   • Có, Redux có thể sử dụng với nhiều framework khác nhau, không chỉ React.
2. Tôi có thể sử dụng Redux trong dự án nhỏ không?
   • Có, nhưng nếu ứng dụng nhỏ, có thể xem xét sử dụng các giải pháp đơn giản hơn như Context API.

Kết luận

Redux là một công cụ mạnh mẽ cho việc quản lý trạng thái ứng dụng. Việc hiểu rõ cách hoạt động của Redux sẽ giúp bạn phát triển ứng dụng hiệu quả hơn. Hãy bắt đầu áp dụng Redux trong dự án của bạn ngay hôm nay!