M

MLOG

Tiếng Việt

Tìm hiểu sâu về hook useReducer của React để quản lý hiệu quả các trạng thái ứng dụng phức tạp, nâng cao hiệu suất và khả năng bảo trì cho các dự án React toàn cầu.

Mô Hình useReducer trong React: Làm Chủ Quản Lý Trạng Thái Phức Tạp

Trong bối cảnh phát triển front-end không ngừng thay đổi, React đã khẳng định mình là một framework hàng đầu để xây dựng giao diện người dùng. Khi các ứng dụng ngày càng phức tạp, việc quản lý trạng thái trở nên ngày càng khó khăn. Hook useState cung cấp một cách đơn giản để quản lý trạng thái trong một component, nhưng đối với các kịch bản phức tạp hơn, React cung cấp một giải pháp thay thế mạnh mẽ: hook useReducer. Bài viết blog này sẽ đi sâu vào mô hình useReducer, khám phá những lợi ích, cách triển khai thực tế và cách nó có thể cải thiện đáng kể các ứng dụng React của bạn trên toàn cầu.

Hiểu Rõ Nhu Cầu Quản Lý Trạng Thái Phức Tạp

Khi xây dựng các ứng dụng React, chúng ta thường gặp phải các tình huống mà trạng thái của một component không chỉ đơn giản là một giá trị, mà là một tập hợp các điểm dữ liệu liên kết với nhau hoặc một trạng thái phụ thuộc vào các giá trị trạng thái trước đó. Hãy xem xét các ví dụ sau:

Trong những kịch bản này, chỉ sử dụng useState có thể dẫn đến code phức tạp và khó quản lý. Việc cập nhật nhiều biến trạng thái để phản hồi một sự kiện duy nhất có thể trở nên cồng kềnh, và logic để quản lý các cập nhật này có thể bị phân tán khắp component, gây khó khăn cho việc hiểu và bảo trì. Đây là lúc useReducer tỏa sáng.

Giới Thiệu về Hook useReducer

Hook useReducer là một giải pháp thay thế cho useState để quản lý logic trạng thái phức tạp. Nó dựa trên các nguyên tắc của mô hình Redux, nhưng được triển khai ngay trong component React, loại bỏ sự cần thiết của một thư viện bên ngoài riêng biệt trong nhiều trường hợp. Nó cho phép bạn tập trung logic cập nhật trạng thái của mình vào một hàm duy nhất gọi là reducer.

Hook useReducer nhận hai đối số:

Hook này trả về một mảng chứa hai phần tử:

Hàm Reducer

Hàm reducer là trung tâm của mô hình useReducer. Nó là một hàm thuần túy, có nghĩa là nó không nên có bất kỳ tác dụng phụ nào (như gọi API hoặc sửa đổi các biến toàn cục) và phải luôn trả về cùng một kết quả cho cùng một đầu vào. Hàm reducer nhận hai đối số:

Bên trong hàm reducer, bạn sử dụng câu lệnh switch hoặc các câu lệnh if/else if để xử lý các loại action khác nhau và cập nhật trạng thái cho phù hợp. Điều này tập trung logic cập nhật trạng thái của bạn và giúp dễ dàng suy luận về cách trạng thái thay đổi để phản hồi các sự kiện khác nhau.

Hàm Dispatch

Hàm dispatch là phương thức bạn sử dụng để kích hoạt các cập nhật trạng thái. Khi bạn gọi dispatch(action), action sẽ được chuyển đến hàm reducer, hàm này sau đó sẽ cập nhật trạng thái dựa trên loại và payload của action.

Một Ví Dụ Thực Tế: Triển Khai Bộ Đếm

Hãy bắt đầu với một ví dụ đơn giản: một component bộ đếm. Điều này minh họa các khái niệm cơ bản trước khi chuyển sang các ví dụ phức tạp hơn. Chúng ta sẽ tạo một bộ đếm có thể tăng, giảm và đặt lại:


import React, { useReducer } from 'react';

// Define action types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';

// Define the reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    case RESET:
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  // Initialize useReducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
    </div>
  );
}

export default Counter;

Trong ví dụ này:

Mở Rộng Ví Dụ Bộ Đếm: Thêm Payload

Hãy sửa đổi bộ đếm để cho phép tăng theo một giá trị cụ thể. Điều này giới thiệu khái niệm payload trong một action:


import React, { useReducer } from 'react';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';
const SET_VALUE = 'SET_VALUE';

function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + action.payload };
    case DECREMENT:
      return { count: state.count - action.payload };
    case RESET:
      return { count: 0 };
    case SET_VALUE:
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  const [inputValue, setInputValue] = React.useState(1);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT, payload: parseInt(inputValue) || 1 })}>Increment by {inputValue}</button>
      <button onClick={() => dispatch({ type: DECREMENT, payload: parseInt(inputValue) || 1 })}>Decrement by {inputValue}</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
       <input
         type="number"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
      </div>
  );
}

export default Counter;

Trong ví dụ mở rộng này:

Lợi Ích của Việc Sử Dụng useReducer

Mô hình useReducer mang lại một số lợi thế so với việc sử dụng trực tiếp useState để quản lý trạng thái phức tạp:

Khi Nào Nên Sử Dụng useReducer

Mặc dù useReducer mang lại những lợi ích đáng kể, nó không phải lúc nào cũng là lựa chọn đúng đắn. Hãy cân nhắc sử dụng useReducer khi:

Đối với các cập nhật trạng thái đơn giản, useState thường là đủ và đơn giản hơn để sử dụng. Hãy xem xét sự phức tạp của trạng thái và tiềm năng phát triển khi đưa ra quyết định.

Các Khái Niệm và Kỹ Thuật Nâng Cao

Kết Hợp useReducer với Context

Để quản lý trạng thái toàn cục hoặc chia sẻ trạng thái giữa nhiều component, bạn có thể kết hợp useReducer với Context API của React. Cách tiếp cận này thường được ưa chuộng hơn Redux cho các dự án vừa và nhỏ nơi bạn không muốn thêm các phụ thuộc bổ sung.


import React, { createContext, useReducer, useContext } from 'react';

// Define action types and reducer (as before)
const INCREMENT = 'INCREMENT';
// ... (other action types and the counterReducer function)

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

function useCounter() {
  return useContext(CounterContext);
}

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

Trong ví dụ này:

Kiểm Thử useReducer

Việc kiểm thử reducer rất đơn giản vì chúng là các hàm thuần túy. Bạn có thể dễ dàng kiểm thử hàm reducer một cách độc lập bằng cách sử dụng một framework kiểm thử đơn vị như Jest hoặc Mocha. Dưới đây là một ví dụ sử dụng Jest:


import { counterReducer } from './counterReducer'; // Giả sử counterReducer nằm trong một tệp riêng

const INCREMENT = 'INCREMENT';

describe('counterReducer', () => {
  it('should increment the count', () => {
    const state = { count: 0 };
    const action = { type: INCREMENT };
    const newState = counterReducer(state, action);
    expect(newState.count).toBe(1);
  });

   it('should return the same state for unknown action types', () => {
        const state = { count: 10 };
        const action = { type: 'UNKNOWN_ACTION' };
        const newState = counterReducer(state, action);
        expect(newState).toBe(state); // Khẳng định rằng trạng thái không thay đổi
    });
});

Kiểm thử các reducer của bạn đảm bảo chúng hoạt động như mong đợi và giúp việc tái cấu trúc logic trạng thái của bạn dễ dàng hơn. Đây là một bước quan trọng trong việc xây dựng các ứng dụng mạnh mẽ và có thể bảo trì.

Tối Ưu Hóa Hiệu Suất với Memoization

Khi làm việc với các trạng thái phức tạp và các cập nhật thường xuyên, hãy cân nhắc sử dụng useMemo để tối ưu hóa hiệu suất của các component, đặc biệt nếu bạn có các giá trị dẫn xuất được tính toán dựa trên trạng thái. Ví dụ:


import React, { useReducer, useMemo } from 'react';

function reducer(state, action) {
  // ... (logic của reducer) 
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // Tính toán một giá trị dẫn xuất, ghi nhớ nó với useMemo
  const derivedValue = useMemo(() => {
    // Phép tính toán tốn kém dựa trên trạng thái
    return state.value1 + state.value2;
  }, [state.value1, state.value2]); // Các phụ thuộc: tính toán lại chỉ khi các giá trị này thay đổi

  return (
    <div>
      <p>Derived Value: {derivedValue}</p>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE1', payload: 10 })}>Update Value 1</button>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE2', payload: 20 })}>Update Value 2</button>
    </div>
  );
}

Trong ví dụ này, derivedValue chỉ được tính toán lại khi state.value1 hoặc state.value2 thay đổi, ngăn chặn các phép tính không cần thiết trong mỗi lần render lại. Cách tiếp cận này là một thực hành phổ biến để đảm bảo hiệu suất render tối ưu.

Các Ví Dụ và Trường Hợp Sử Dụng trong Thực Tế

Hãy cùng khám phá một vài ví dụ thực tế về nơi useReducer là một công cụ có giá trị trong việc xây dựng các ứng dụng React cho đối tượng người dùng toàn cầu. Lưu ý rằng các ví dụ này được đơn giản hóa để minh họa các khái niệm cốt lõi. Các triển khai thực tế có thể liên quan đến logic và các phụ thuộc phức tạp hơn.

1. Bộ Lọc Sản Phẩm Thương Mại Điện Tử

Hãy tưởng tượng một trang web thương mại điện tử (hãy nghĩ đến các nền tảng phổ biến như Amazon hoặc AliExpress, có sẵn trên toàn cầu) với một danh mục sản phẩm lớn. Người dùng cần lọc sản phẩm theo nhiều tiêu chí khác nhau (khoảng giá, thương hiệu, kích cỡ, màu sắc, quốc gia xuất xứ, v.v.). useReducer là lý tưởng để quản lý trạng thái của bộ lọc.


import React, { useReducer } from 'react';

const initialState = {
  priceRange: { min: 0, max: 1000 },
  brand: [], // Mảng các thương hiệu đã chọn
  color: [], // Mảng các màu đã chọn
  //... các tiêu chí lọc khác
};

function filterReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PRICE_RANGE':
      return { ...state, priceRange: action.payload };
    case 'TOGGLE_BRAND':
      const brand = action.payload;
      return { ...state, brand: state.brand.includes(brand) ? state.brand.filter(b => b !== brand) : [...state.brand, brand] };
    case 'TOGGLE_COLOR':
      // Logic tương tự cho việc lọc màu
      return { ...state, color: state.color.includes(action.payload) ? state.color.filter(c => c !== action.payload) : [...state.color, action.payload] };
    // ... các action lọc khác
    default:
      return state;
  }
}

function ProductFilter() {
  const [state, dispatch] = useReducer(filterReducer, initialState);

  // Các component UI để chọn tiêu chí lọc và kích hoạt các action dispatch
  // Ví dụ: Thanh trượt khoảng giá, hộp kiểm cho thương hiệu, v.v.

  return (
    <div>
      <!-- Các yếu tố UI của bộ lọc -->
    </div>
  );
}

Ví dụ này cho thấy cách xử lý nhiều tiêu chí lọc một cách có kiểm soát. Khi người dùng sửa đổi bất kỳ cài đặt bộ lọc nào (giá, thương hiệu, v.v.), reducer sẽ cập nhật trạng thái bộ lọc tương ứng. Component chịu trách nhiệm hiển thị sản phẩm sau đó sử dụng trạng thái đã cập nhật để lọc các sản phẩm được hiển thị. Mô hình này hỗ trợ xây dựng các hệ thống lọc phức tạp phổ biến trên các nền tảng thương mại điện tử toàn cầu.

2. Biểu Mẫu Nhiều Bước (ví dụ: Biểu Mẫu Giao Hàng Quốc Tế)

Nhiều ứng dụng liên quan đến các biểu mẫu nhiều bước, như những biểu mẫu được sử dụng để giao hàng quốc tế hoặc tạo tài khoản người dùng với các yêu cầu phức tạp. useReducer vượt trội trong việc quản lý trạng thái của các biểu mẫu như vậy.


import React, { useReducer } from 'react';

const initialState = {
  step: 1, // Bước hiện tại trong biểu mẫu
  formData: {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    country: '',
    // ... các trường biểu mẫu khác
  },
  errors: {},
};

function formReducer(state, action) {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1 };
    case 'PREV_STEP':
      return { ...state, step: state.step - 1 };
    case 'UPDATE_FIELD':
      return { ...state, formData: { ...state.formData, [action.payload.field]: action.payload.value } };
    case 'SET_ERRORS':
      return { ...state, errors: action.payload };
    case 'SUBMIT_FORM':
      // Xử lý logic gửi biểu mẫu tại đây, ví dụ: gọi API
      return state;
    default:
      return state;
  }
}

function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  // Logic render cho mỗi bước của biểu mẫu
  // Dựa trên bước hiện tại trong trạng thái
  const renderStep = () => {
    switch (state.step) {
      case 1:
        return <Step1 formData={state.formData} dispatch={dispatch} />;
      case 2:
        return <Step2 formData={state.formData} dispatch={dispatch} />;
      // ... các bước khác
      default:
        return <p>Invalid Step</p>;
    }
  };

  return (
    <div>
      {renderStep()}
      <!-- Các nút điều hướng (Tiếp theo, Trước đó, Gửi) dựa trên bước hiện tại -->
    </div>
  );
}

Điều này minh họa cách quản lý các trường biểu mẫu, các bước và các lỗi xác thực tiềm ẩn khác nhau một cách có cấu trúc và dễ bảo trì. Nó rất quan trọng để xây dựng các quy trình đăng ký hoặc thanh toán thân thiện với người dùng, đặc biệt là đối với người dùng quốc tế, những người có thể có những kỳ vọng khác nhau dựa trên phong tục địa phương và kinh nghiệm của họ với các nền tảng khác nhau như Facebook hoặc WeChat.

3. Ứng Dụng Thời Gian Thực (Trò chuyện, Công Cụ Cộng Tác)

useReducer có lợi cho các ứng dụng thời gian thực, chẳng hạn như các công cụ cộng tác như Google Docs hoặc các ứng dụng nhắn tin. Nó xử lý các sự kiện như nhận tin nhắn, người dùng tham gia/rời khỏi và trạng thái kết nối, đảm bảo giao diện người dùng cập nhật khi cần thiết.


import React, { useReducer, useEffect } from 'react';

const initialState = {
  messages: [],
  users: [],
  connectionStatus: 'connecting',
};

function chatReducer(state, action) {
  switch (action.type) {
    case 'RECEIVE_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] };
    case 'USER_JOINED':
      return { ...state, users: [...state.users, action.payload] };
    case 'USER_LEFT':
      return { ...state, users: state.users.filter(user => user.id !== action.payload.id) };
    case 'SET_CONNECTION_STATUS':
      return { ...state, connectionStatus: action.payload };
    default:
      return state;
  }
}

function ChatRoom() {
  const [state, dispatch] = useReducer(chatReducer, initialState);

  useEffect(() => {
    // Thiết lập kết nối WebSocket (ví dụ):
    const socket = new WebSocket('wss://your-websocket-server.com');

    socket.onopen = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
    socket.onmessage = (event) => dispatch({ type: 'RECEIVE_MESSAGE', payload: JSON.parse(event.data) });
    socket.onclose = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });

    return () => socket.close(); // Dọn dẹp khi component bị gỡ bỏ
  }, []);

  // Render tin nhắn, danh sách người dùng và trạng thái kết nối dựa trên trạng thái
  return (
    <div>
      <p>Connection Status: {state.connectionStatus}</p>
      <!-- UI để hiển thị tin nhắn, danh sách người dùng và gửi tin nhắn -->
    </div>
  );
}

Ví dụ này cung cấp nền tảng để quản lý một cuộc trò chuyện thời gian thực. Trạng thái xử lý việc lưu trữ tin nhắn, người dùng hiện đang trong cuộc trò chuyện và trạng thái kết nối. Hook useEffect chịu trách nhiệm thiết lập kết nối WebSocket và xử lý các tin nhắn đến. Cách tiếp cận này tạo ra một giao diện người dùng đáp ứng và năng động, phục vụ người dùng trên toàn thế giới.

Các Thực Hành Tốt Nhất khi Sử Dụng useReducer

Để sử dụng useReducer một cách hiệu quả và tạo ra các ứng dụng có thể bảo trì, hãy xem xét các thực hành tốt nhất sau:

Kết Luận

Hook useReducer là một công cụ mạnh mẽ và linh hoạt để quản lý trạng thái phức tạp trong các ứng dụng React. Nó mang lại nhiều lợi ích, bao gồm logic trạng thái tập trung, tổ chức code được cải thiện và khả năng kiểm thử nâng cao. Bằng cách tuân theo các thực hành tốt nhất và hiểu các khái niệm cốt lõi của nó, bạn có thể tận dụng useReducer để xây dựng các ứng dụng React mạnh mẽ hơn, dễ bảo trì hơn và hiệu suất cao hơn. Mô hình này trao quyền cho bạn để giải quyết các thách thức quản lý trạng thái phức tạp một cách hiệu quả, cho phép bạn xây dựng các ứng dụng sẵn sàng cho toàn cầu, cung cấp trải nghiệm người dùng liền mạch trên toàn thế giới.

Khi bạn đi sâu hơn vào việc phát triển React, việc kết hợp mô hình useReducer vào bộ công cụ của bạn chắc chắn sẽ dẫn đến các cơ sở mã sạch hơn, có khả năng mở rộng cao hơn và dễ bảo trì hơn. Hãy nhớ luôn xem xét nhu cầu cụ thể của ứng dụng và chọn phương pháp quản lý trạng thái tốt nhất cho từng tình huống. Chúc bạn lập trình vui vẻ!