Redux npm: Hướng dẫn cài đặt Redux bằng npm với Redux Toolkit

Nội dung bài viết

Redux npm chỉ việc cài đặt và sử dụng Redux thông qua npm trong các dự án JavaScript và React. Redux là thư viện quản lý state phổ biến trong hệ sinh thái JavaScript, cho phép lưu trữ và kiểm soát trạng thái ứng dụng theo một luồng dữ liệu tập trung và nhất quán. Thông qua việc cài đặt Redux bằng npm, developer có thể tách biệt rõ ràng giữa logic xử lý dữ liệu và giao diện người dùng, từ đó giúp ứng dụng dễ dự đoán, dễ debug và dễ mở rộng.

Đọc bài viết sau để được giải đáp chi tiết hơn về:

Redux npm là gì?
Cách cài đặt Redux npm đúng chuẩn hiện nay
Redux Toolkit – cách dùng Redux npm được khuyến nghị
Khi nào nên sử dụng Redux npm?
Redux npm hoạt động như thế nào?

Redux npm là gì? Khi nào cần sử dụng Redux?

Redux là thư viện quản lý state cho các ứng dụng JavaScript, có thể được cài đặt và sử dụng thông qua npm. Khi làm việc với Redux, npm (Node Package Manager) đóng vai trò quan trọng trong việc quản lý các package Redux cũng như những dependency liên quan khác trong dự án.

Mọi ứng dụng đều có state (trạng thái), và state này có thể là sự kết hợp từ trạng thái của các component bên trong ứng dụng. Redux thường được mô tả là một “predictable state container” – thay vì để state phân tán trong nhiều component, Redux giúp lưu trữ toàn bộ state của ứng dụng trong một store tập trung.

Redux có thể được sử dụng với bất kỳ framework JavaScript nào, tuy nhiên nó phổ biến nhất khi kết hợp với React (thông qua react-redux). Trong các ứng dụng React, Redux giúp quản lý global state và đảm bảo luồng dữ liệu một chiều, từ đó giảm đáng kể độ phức tạp khi ứng dụng mở rộng.

Xem thêm: Redux React Native: Chi tiết sử dụng và Lỗi thường gặp

Khi nào nên sử dụng Redux?

Không phải dự án nào cũng cần Redux để quản lý state. Trong các trường hợp đơn giản, bạn hoàn toàn có thể:

Quản lý state ngay trong component bằng React local state
Hoặc sử dụng Context API hay các thư viện nhẹ hơn

Tuy nhiên, khi ứng dụng ngày càng phát triển và mở rộng, sẽ có những state cần được chia sẻ giữa nhiều component khác nhau, không chỉ để hiển thị, mà còn để quản lý, cập nhật hoặc thực hiện các logic dựa trên giá trị của chúng. Việc chia sẻ và đồng bộ state giữa nhiều phần của ứng dụng trở nên khó kiểm soát.

Đây chính là lúc Redux phát huy vai trò của mình. Redux cho phép lưu trữ và quản lý toàn bộ state của ứng dụng tại một nơi tập trung. Redux cũng cung cấp các API quan trọng giúp bạn thay đổi state hiện tại cũng như lấy ra state mới nhất của ứng dụng một cách nhất quán và có kiểm soát.

Cách tiếp cận này đặc biệt hữu ích với các ứng dụng có quy mô trung bình đến lớn – nơi state được chia sẻ giữa nhiều phần khác nhau và gắn liền với logic nghiệp vụ phức tạp.

Cách cài đặt Redux thông qua npm đúng chuẩn hiện nay

Về mặt kỹ thuật, bạn có thể cài đặt Redux core riêng lẻ thông qua npm bằng lệnh: npm install redux

Tuy nhiên, với các dự án mới, Redux team không khuyến nghị cài đặt redux core trực tiếp. Cách cài đặt Redux npm được khuyến nghị hiện nay là sử dụng Redux Toolkit (@reduxjs/toolkit).

Redux Toolkit được phát hành dưới dạng package trên NPM, cài đặt bằng với lệnh sau:

npm install @reduxjs/toolkit react-redux

Lệnh này sẽ:

Cài đặt Redux Toolkit @reduxjs/toolkit – đảm nhiệm phần logic Redux (store, reducer, middleware…)
Cài đặt thêm thư viên react-redux để kết nối Redux với React component (thông qua <Provider>, useDispatch, useSelector). Trong các dự án hiện đại, khi cài đặt Redux npm, bạn gần như luôn cần cài thêm react-redux để Redux có thể hoạt động hiệu quả và đúng chuẩn trong môi trường React.
Tự động thêm các package vào mục dependencies trong package.json

Redux Toolkit đã bao gồm Redux core, vì vậy trong hầu hết các trường hợp bạn không cần cài Redux core riêng lẻ.

Redux Toolkit có ưu điểm gì so với Redux truyền thống?

Redux Toolkit tích hợp sẵn các best practices được khuyến nghị, giúp giải quyết ba vấn đề phổ biến nhất mà developer thường gặp khi làm việc với Redux classic:

Cấu hình Redux store quá phức tạp
Dễ mắc lỗi khi quản lý immutability
Quá nhiều boilerplate code

Redux Toolkit cung cấp các API hiện đại như:

configureStore: tạo store nhanh gọn, đã cấu hình sẵn middleware phổ biến
createSlice: gộp reducer và action vào cùng một nơi, giúp code rõ ràng và dễ quản lý
Tích hợp sẵn Immer: cho phép viết logic cập nhật state ngắn gọn nhưng vẫn đảm bảo immutability
RTK Query: hỗ trợ fetch, cache và đồng bộ dữ liệu từ API một cách hiệu quả

Redux npm hoạt động theo nguyên tắc nào? Vì sao Redux dễ dự đoán (predictable)?

Một nguyên tắc cốt lõi của Redux là: state là chỉ đọc (read-only). Điều này giúp bạn ngăn chặn việc bất kỳ phần nào của giao diện (UI) hay các network request tự ý ghi hoặc cập nhật state trực tiếp. Cách duy nhất để thay đổi state của ứng dụng là:

Tạo một action mô tả ý định muốn thay đổi
Dispatch action đó vào store
Để xác định cách state được cập nhật khi có action, bạn viết các reducer – những hàm thuần (pure functions) nhận state cũ và action, sau đó tính toán và trả về state mới. Reducer không mutate state cũ, mà tạo ra một instance state mới đã bao gồm các cập nhật cần thiết. Cách tiếp cận này giúp luồng dữ liệu rõ ràng, nhất quán và dễ theo dõi.

Trong một ứng dụng Redux điển hình:

Chỉ có một store duy nhất
Có một root reducer

Khi ứng dụng phát triển, root reducer sẽ được tách thành nhiều reducer nhỏ hơn, mỗi reducer quản lý một phần của state tree. Điều này tương tự như cách một ứng dụng React chỉ có một root component, nhưng được cấu thành từ rất nhiều component nhỏ.

Các khái niệm cốt lõi của Redux trong npm

Trong phần này, cùng tìm hiểu rõ hơn về các khái niệm được nhắc đến ở trên: store, action, reducer.

Redux Store là gì?

Redux store là “trung tâm điều phối” chính, nơi lưu trữ toàn bộ state của ứng dụng, cho phép các component truy cập và cập nhật state một cách nhất quán. Store cần được xem và duy trì như single source of truth (nguồn dữ liệu duy nhất và đáng tin cậy) cho trạng thái của toàn bộ ứng dụng. Từ đó giúp việc debug, theo dõi thay đổi state và bảo trì code trở nên dễ dàng hơn.

Action trong Redux là gì?

Action thực chất chỉ là một object JavaScript thuần, dùng để mô tả sự thay đổi cần thực hiện trong store.

Reducer trong Redux là gì?

Reducer nhận vào hai tham số state trước đó (previous state) và action. Sau đó, reducer sẽ “xử lý” (reduce) hai đầu vào này và trả về một phiên bản state mới đã được cập nhật. Một số đặc điểm chính:

Là pure function: Không mutate (thay đổi trực tiếp) state cũ. Không gọi API, không tạo side effects.
Luôn trả về một state mới.
Chỉ dựa vào state và action để tính toán kết quả.

Mỗi khi một action được dispatch, tất cả reducer đều được gọi. Mỗi reducer sẽ:

Kiểm tra action.type (thường bằng switch).
Nếu khớp type, reducer sẽ xử lý và cập nhật state.
Nếu không khớp, reducer trả về state cũ.

Các reducer ngày nay hầu như luôn được xây dựng bằng Redux Toolkit. Nhờ tích hợp Immer, Redux Toolkit cho phép viết logic cập nhật state theo cách “trông giống như mutate”, nhưng vẫn đảm bảo immutability ở phía dưới. Điều này giúp code ngắn gọn, dễ đọc, đồng thời giữ nguyên các nguyên tắc cốt lõi của Redux trở nên dễ dự đoán.

Với Redux Toolkit, logic cơ bản của ứng dụng sẽ có dạng như sau:

import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit cho phép viết logic "mutate" trực tiếp trong reducer.
      // Thực tế state không bị thay đổi trực tiếp vì Redux Toolkit sử dụng
      // thư viện Immer để theo dõi thay đổi trên "draft state" và tạo ra
      // một state mới bất biến (immutable) dựa trên các thay đổi đó.
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// Vẫn có thể subscribe để lắng nghe sự thay đổi của store
store.subscribe(() => console.log(store.getState()))

// Vẫn dispatch action objects, nhưng action đã được tạo sẵn cho chúng ta
store.dispatch(incremented())
// { value: 1 }
store.dispatch(incremented())
// { value: 2 }
store.dispatch(decremented())
// { value: 1 }

Điểm mạnh của Redux nằm ở khả năng scale cho các ứng dụng lớn và phức tạp. Nó cũng cho phép xây dựng các công cụ developer rất mạnh, vì mọi thay đổi state đều có thể truy vết ngược lại action đã gây ra nó. Bạn thậm chí có thể ghi lại toàn bộ phiên làm việc của người dùng và tái hiện lại chỉ bằng cách replay các action.

Các câu hỏi thường gặp về Redux npm

Khi nào nên dùng Redux npm?

Redux phát huy hiệu quả rõ rệt nhất khi:

Ứng dụng có lượng state lớn, cần được sử dụng ở nhiều nơi khác nhau.
State của ứng dụng thay đổi thường xuyên.
Logic cập nhật state phức tạp.
Ứng dụng có codebase trung bình hoặc lớn, được phát triển bởi nhiều người.
Bạn cần theo dõi và kiểm soát lịch sử thay đổi của state theo thời gian.

Ngoài Redux, hiện nay cũng có nhiều công cụ khác có thể giải quyết một phần hoặc toàn bộ những vấn đề tương tự, như: quản lý state, cache dữ liệu từ server, hay truyền dữ liệu xuyên suốt UI.

Redux có chỉ dùng cho React không? Làm thế nào để tạo ứng dụng React tích hợp Redux?

Không. Redux là thư viện quản lý state độc lập với framework, có thể sử dụng với bất kỳ ứng dụng JavaScript nào. Cách sử dụng phổ biến nhất là kết hợp với React và React Native, tuy nhiên Redux cũng có các thư viện kết nối (bindings) dành cho Angular, Angular 2, Vue, Mithril và nhiều framework khác.

Hai cách được khuyến nghị để bắt đầu một ứng dụng React + Redux là:

Sử dụng build tool hiện đại như Vite, Parcel, RSBuild (phù hợp với SPA thuần client-side): Các build tool này cung cấp tốc độ khởi tạo và build vượt trội so với CRA, đồng thời dễ dàng tích hợp với Redux Toolkit và các thư viện hiện đại khác.
Sử dụng framework như Next.js với template with-redux (khuyến nghị cho đa số dự án):

Frameworks tích hợp sẵn nhiều thành phần quan trọng như routing, rendering, data fetching và code splitting. Nhờ các quy ước rõ ràng và giải pháp được chuẩn hóa sẵn, framework giúp bạn tránh phải tự thiết kế lại kiến trúc cho những vấn đề chắc chắn sẽ phát sinh khi ứng dụng đi vào production.

Next.js là lựa chọn phổ biến cho các ứng dụng web hiện đại, cung cấp các template có sẵn Redux (with-redux).

Bạn có thể tạo nhanh một dự án Next.js đã tích hợp sẵn Redux bằng lệnh sau:

npx create-next-app --example with-redux my-app

Redux có phải là dev dependency không?

Không. Redux là dependency chạy trong môi trường production. Cụ thể, Redux được sử dụng trực tiếp trong quá trình vận hành ứng dụng để quản lý state, nên nó phải nằm trong dependencies, không phải devDependencies.

Chỉ các công cụ hỗ trợ phát triển như Redux DevTools hoặc middleware phục vụ debug mới được xem là dev dependency.

Redux còn được sử dụng rộng rãi hiện nay không?

Có. Redux vẫn được sử dụng rộng rãi,đặc biệt với Redux Toolkit. Dù có nhiều giải pháp quản lý state mới như Zustand, Recoil hay Jotai, Redux vẫn giữ vị thế vững chắc trong các dự án lớn, hệ thống enterprise và ứng dụng cần kiểm soát state phức tạp.

Redux Toolkit đã giúp Redux trở nên gọn nhẹ, dễ dùng và phù hợp hơn với xu hướng phát triển hiện đại.

Tổng kết về Redux npm

Việc hiểu rõ redux npm là gì, khi nào nên dùng và cách cài đặt đúng chuẩn sẽ giúp bạn đưa ra quyết định phù hợp ngay từ đầu, tránh phải refactor kiến trúc khi ứng dụng phát triển về sau. Nếu dự án của bạn cần một giải pháp quản lý state rõ ràng, nhất quán và sẵn sàng cho production, Redux npm kết hợp với Redux Toolkit là lựa chọn đáng cân nhắc.