Redux Toolkit là gì? Tất tần tật kiến thức cho người mới bắt đầu
Redux Toolkit đã trở thành một công cụ không thể thiếu đối với các nhà phát triển React khi làm việc với quản lý trạng thái. Được thiết kế để đơn giản hóa quy trình làm việc với Redux, Redux Toolkit cung cấp một bộ tiện ích mạnh mẽ giúp giảm thiểu code boilerplate và tối ưu hóa hiệu suất ứng dụng. Hãy cùng Bizfly Cloud tìm hiểu ngay sau đây.
Redux Toolkit là gì?
Redux Toolkit là một thư viện được phát triển để đơn giản hóa việc sử dụng Redux, một công cụ quản lý trạng thái phổ biến trong các ứng dụng JavaScript, đặc biệt là với React. Redux Toolkit cung cấp các API và công cụ giúp lập trình viên dễ dàng hơn trong việc viết mã, giảm thiểu lượng mã cần thiết và cải thiện tính khả dụng của ứng dụng.
Redux Toolkit hoạt động như thế nào?
Redux sẽ đưa tất cả các state vào một kho lưu trữ chung gọi là Store, khi component nào đó muốn sử dụng state có trong Store thì sẽ gọi vào Store thông qua Reducer. Và để thực hiện hành động đối với các state này thì chúng ta sẽ tạo ra các Action.
Tại sao nên dùng Redux Toolkit?
● Đơn giản hóa quy trình phát triển: Redux Toolkit giúp giảm thiểu số lượng mã cần viết và đơn giản hóa cú pháp. Thay vì phải tạo nhiều action types, action creators và reducers một cách thủ công, bạn có thể sử dụng các hàm như createSlice và createReducer để tự động hóa quy trình này. Điều này không chỉ giúp tiết kiệm thời gian mà còn làm cho mã nguồn trở nên dễ đọc và bảo trì hơn.
● Giảm thiểu mã lặp lại: Một trong những vấn đề lớn khi sử dụng Redux truyền thống là mã lặp lại. Redux Toolkit cung cấp các utility functions giúp bạn tạo ra reducers và actions một cách nhanh chóng và hiệu quả hơn. Ví dụ, createSlice cho phép bạn định nghĩa các action và reducer trong cùng một nơi, giúp mã nguồn gọn gàng hơn.
● Hỗ trợ cho các tác vụ bất đồng bộ: Redux Toolkit tích hợp sẵn các công cụ để xử lý các tác vụ bất đồng bộ thông qua createAsyncThunk. Điều này giúp bạn dễ dàng quản lý các yêu cầu API mà không cần phải viết nhiều mã phức tạp để xử lý trạng thái loading và error.
● Tích hợp dễ dàng với React: Redux Toolkit được thiết kế để hoạt động tốt với React, cung cấp các API như configureStore để dễ dàng cấu hình store và kết nối với các component. Điều này giúp bạn nhanh chóng tích hợp Redux vào ứng dụng React mà không gặp phải nhiều khó khăn.
● Tăng cường hiệu suất: Việc sử dụng Redux Toolkit giúp chuẩn hóa dữ liệu trước khi lưu vào Redux store, từ đó cải thiện hiệu suất của ứng dụng. Điều này đặc biệt quan trọng trong các ứng dụng lớn với nhiều state phức tạp.
Redux Toolkit là gì?
Các thành phần bên trong Redux Toolkit
1. configureStore()
configureStore là hàm chính để tạo store Redux. Nó sử dụng createStore của Redux bên trong nhưng bọc lại để cung cấp các mặc định tốt hơn cho quá trình thiết lập store, mang lại trải nghiệm phát triển tốt hơn.
Cách sử dụng cơ bản:
typescript
Giải thích
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducers'
const store = configureStore({
reducer: rootReducer
})
export type RootState = ReturnType
export type AppDispatch = typeof store.dispatch
2. createReducer()
createReducer là một hàm tiện ích để tạo một reducer, sử dụng cú pháp case reducers thay vì switch statements.
typescript
Giải thích
import { createReducer } from '@reduxjs/toolkit'
import { increment, decrement } from './actions'
const counterReducer = createReducer(0, {
[increment.type]: (state) => state + 1,
[decrement.type]: (state) => state - 1
})
3. createAction()
createAction tạo ra một action creator function cho một action type cụ thể.
typescript
import { createAction } from '@reduxjs/toolkit'
export const increment = createAction
export const decrement = createAction
4. createSlice
createSlice là một hàm tiện ích để tạo một slice reducer và action creators cùng một lúc dựa trên một object mô tả slice.
typescript
Giải thích
import { createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1
}
})
export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer
5. createAsyncThunk
createAsyncThunk tạo một thunk action creator từ một promise-returning function.
typescript
Giải thích
import { createAsyncThunk } from '@reduxjs/toolkit'
import { fetchCount } from './counterAPI'
export const incrementAsync = createAsyncThunk(
'counter/fetchCount',
async (amount: number) => {
const response = await fetchCount(amount)
return response.data
})
6. createEntityAdapter
createEntityAdapter cung cấp một tập hợp các chức năng để quản lý một mảng các phần tử được xác định bởi ID trong store Redux.
typescript
Giải thích
import { createEntityAdapter } from '@reduxjs/toolkit'
const todosAdapter = createEntityAdapter
selectId: (todo) => todo.id,
sortComparer: (a, b) => a.priority - b.priority
})
7. createSelector
createSelector là một hàm tiện ích để tạo ra một memoized selector.
typescript
import { createSelector } from '@reduxjs/toolkit'
const selectTodos = (state: RootState) => state.todos
const selectTodoIds = createSelector(selectTodos, (todos) => todos.map((todo) => todo.id))
Các thành phần trên cùng với việc sử dụng TypeScript giúp đơn giản hóa quá trình thiết lập và sử dụng Redux, đồng thời tăng cường khả năng kiểm tra kiểu dữ liệu và phát hiện lỗi sớm trong quá trình phát triển.
Giới thiệu về RTK Query
RTK Query là một phần mở rộng trong Redux Toolkit, được thiết kế để đơn giản hóa việc lấy dữ liệu và lưu trữ cache trong các ứng dụng web. Nó giúp loại bỏ nhu cầu viết logic lấy dữ liệu và quản lý cache một cách thủ công, nhờ vào việc sử dụng các API như createSlice và createAsyncThunk của Redux Toolkit2.
Tính năng nhính của RTK Query
● Đơn giản hóa việc lấy dữ liệu: RTK Query cung cấp một cách tiếp cận dễ dàng để thực hiện các yêu cầu API thông qua việc định nghĩa các "endpoints" mà không cần phải viết mã phức tạp cho từng yêu cầu.
● Tự động quản lý cache: RTK Query tự động xử lý việc lưu trữ cache cho dữ liệu đã lấy, giúp tối ưu hóa hiệu suất và giảm thiểu số lần yêu cầu đến server
● Hỗ trợ Hooks trong react: RTK Query tự động tạo ra các hooks cho các endpoint đã định nghĩa, cho phép các thành phần React dễ dàng truy cập và sử dụng dữ liệu.
● Tính năng vòng đời cache: RTK Query cho phép cấu hình vòng đời của cache, bao gồm khả năng cập nhật cache qua websocket hoặc các phương thức khác sau khi dữ liệu ban đầu được lấy
● Tương thích với nhiều giao diện người dùng: Mặc dù RTK Query thường được sử dụng với React, nó cũng có thể được tích hợp với bất kỳ lớp giao diện người dùng nào khác
RTK Query gồm những gì?
1. createApi()
Đây là hàm cốt lõi của RTK Query, cho phép các nhà phát triển định nghĩa một tập hợp các "endpoint" để chỉ định cách lấy dữ liệu từ các API backend. Hàm này tạo ra một cấu trúc "api slice" bao gồm logic cho việc lấy dữ liệu và lưu trữ, thường được sử dụng một lần trong ứng dụng cho một URL cơ sở cụ thể.
2. fetchBaseQuery()
Đây là một lớp bọc nhẹ xung quanh API fetch gốc, được thiết kế để đơn giản hóa các yêu cầu. Nó phục vụ như một truy vấn cơ sở được khuyến nghị cho hầu hết các trường hợp sử dụng trong createApi, giúp thực hiện các tác vụ lấy dữ liệu phổ biến dễ dàng hơn.
3. ApiProvider
Thành phần này có thể được sử dụng như một nhà cung cấp cho RTK Query nếu bạn chưa thiết lập một cửa hàng Redux. Nó cho phép "api slice" có thể truy cập được trong toàn bộ ứng dụng của bạn.
4. setupListeners()
Hàm tiện ích này được sử dụng để kích hoạt các hành vi như tự động lấy lại dữ liệu khi một số sự kiện xảy ra, chẳng hạn như khi thành phần được gắn vào hoặc khi người dùng kết nối lại với mạng. Nó giúp quản lý vòng đời của các mục cache một cách hiệu quả.
Hướng dẫn tải Redux Toolkit
Bước 1: Tạo một dự án React mới (Tùy chọn)
Nếu bạn chưa có dự án React nào, hãy tạo một dự án mới bằng lệnh sau:
npx create-react-app my-app
Thay thế my-appbằng tên ứng dụng bạn muốn.
Bước 2: Cài đặt Redux Toolkit
Mở terminal và điều hướng đến thư mục dự án của bạn. Cài đặt Redux Toolkit bằng npm hoặc yarn:
npm install @reduxjs/toolkit
hoặc
yarn add @reduxjs/toolkit
Lệnh này cài đặt @reduxjs/toolkitgói, bao gồm thư viện Redux Toolkit.
Bước 3: Cài đặt React Redux
Ngoài Redux Toolkit, bạn sẽ cần cài đặt React Redux, cung cấp chức connectnăng kết nối các thành phần React của bạn với kho lưu trữ Redux:
npm install react-redux
hoặc
yarn add react-redux
Thiết lập Redux Store
Tạo một file mới, ví dụ store.js, trong thư mục src của bạn và cấu hình Redux Store như sau:
javascript
Giải thích
// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers'; // Import reducer của bạn
const store = configureStore({
reducer: rootReducer,
});
export default store;
Sử dụng Redux Toolkit Slices
Slice là phần quan trọng trong Redux Toolkit, giúp kết hợp actions và reducers thành một module duy nhất. Bạn có thể tạo một slice bằng cách sử dụng hàm createSlice. Dưới đây là ví dụ về cách tạo một slice cho một bộ đếm:
// src/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
},
});
// Xuất các action để sử dụng trong component
export const { increment, decrement } = counterSlice.actions;
// Xuất reducer để thêm vào store
export default counterSlice.reducer;
Sử dụng Redux Toolkit Selectors
Redux Toolkit cung cấp hàm createSelector từ thư viện Reselect để tạo các selectors có khả năng ghi nhớ (memoization). Điều này có nghĩa là nếu các tham số đầu vào không thay đổi, selector sẽ không tính toán lại giá trị mà sẽ trả về giá trị đã lưu trữ.
Ví dụ:
import { createSelector } from 'reselect';
const selectSomeData = state => state.someData;
const selectFilteredSortedTransformedData = createSelector(
selectSomeData,
someData => {
const filteredData = expensiveFiltering(someData);
const sortedData = expensiveSorting(filteredData);
return transformedData;
}
);
Khi nào thì nên sử dụng Redux Toolkit?
● Quản lý trạng thái phức tạp: Nếu ứng dụng của bạn có nhiều component cần chia sẻ trạng thái hoặc có logic phức tạp liên quan đến trạng thái, Redux Toolkit sẽ giúp bạn quản lý và tổ chức mã nguồn một cách hiệu quả hơn. Nó cung cấp các hàm như createSlice và createAsyncThunk, giúp bạn dễ dàng tạo ra các action và reducer mà không cần viết nhiều mã lặp lại.
● Giảm thiểu boilerplate code:
Redux truyền thống thường yêu cầu bạn viết nhiều mã để thiết lập store, action creators và reducers. Redux Toolkit giúp giảm thiểu lượng mã cần thiết, cho phép bạn tập trung vào việc phát triển tính năng hơn là cấu hình. Các hàm như configureStore và createReducer giúp đơn giản hóa quá trình này.
● Tích hợp với các API: Nếu bạn cần thực hiện các tác vụ bất đồng bộ như gọi API, Redux Toolkit cung cấp createAsyncThunk, giúp bạn dễ dàng quản lý các hành động bất đồng bộ mà không cần phải xử lý nhiều trạng thái loading hoặc error một cách thủ công.
Kết luận
Với khả năng giảm thiểu lượng boilerplate code, cải thiện trải nghiệm phát triển, tối ưu hóa hiệu suất và tăng cường khả năng bảo trì, Redux Toolkit chính là công cụ hữu ích cho các nhà phát triển mới hay đã có kinh nghiệm.
