Sử dụng redux và redux toolkit để quản lý state trong toàn ứng dụng rất tốt. Redux giúp tạo ra kho dữ liệu để các component dùng chung.
Redux là gì
Trước khi biết sử dụng redux và redux toolkit, bạn cần biết sơ qua redux là gì cái đã. Vậy redux là gì?
Trong React, mỗi component đều có state để lưu dữ liệu của mình. Khi cần chuyển dữ liệu state đến các component khác thì sao? Nếu đơn giản thì dùng props để truyền.
Nhưng nếu trong ứng dụng mà việc truyền dữ liệu giữa các component là rất nhiều. Hoặc ứng dụng của bạn có chừng 3 cấp độ component trở lên và cần share dữ liệu giữa chúng thì vấn đề sẽ rất phức tạp. Lúc này chúng ta cần đến redux.
Redux là một công cụ giúp bạn quản lý state của toàn ứng dụng. Khi có redux trong ứng dụng thì các component cần share dữ liệu cứ gửi nhận dữ liệu vào store – một database được redux tạo ra để làm nơi lưu dữ liệu chung cho các component trong toàn ứng dụng .
Nhờ có redux, mà tránh được các phức tạp không cần phải có khi các component cần share dữ liệu với nhau (ứng dụng lớn nào cũng cần). Tất nhiên dữ liệu state riêng của từng component vẫn cần, redux giúp share state chung cho các component trong ứng dụng mà thôi.
Redux toolkit là gì
Việc code với redux là không dễ, khá phức tạp. Code với redux bạn phải lập trình chi tiết rất nhiều thứ như const, reducers, actions, store… Khá mơ hồ và mệt mỏi với người mới học. Cho nên redux toolkit được tạo ra để đơn giản hóa cách viết code với redux. Chính vì vậy khi đã cài redux để dùng trong ứng dụng thì rất nên cài luôn redux toolkit.
Cài đặt redux và redux toolkit
Muốn dùng thì đầu tiên cài chúng vào project. Thực hiện bằng cách chạy lệnh sau trong folder project:
npm install react-redux npm install @reduxjs/toolkit
Khi đã cài xong, bạn bắt đầu tạo store, rồi nhúng store vào ứng dụng. Kế tiếp là tạo các slice và nhúng các slide và store đã tạo. Cuối cùng, các component của ứng dụng có thể tương tác để lấy về dữ liệu từ store (bằng cách dùng useSelector) hoặc gửi thông tin lên store (dùng hàm dispatch)
Tạo store trong redux
Store là kho lưu dữ liệu của redux. Có thể xem store như là database ở phía client của ứng dụng. Mỗi store có thể chứa nhiều loại dữ liệu khác nhau. Các dữ liệu này có thể được quản lý : gán, sửa, xóa bởi các reducer. Tạo store như sau:
Tạo file tên src/store.js (hoặc gì cũng được) và code để tạo trước tiên 1 store rỗng . Store sẽ có nhiều reducer từ từ sẽ bổ sung vào sau.
//src/store.js
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {
//các reducer
},
})
Đưa store vào ứng dụng React
Mở file src/index.js, đặt <Provider> bao quanh <App> và truyền store cho nó. Code như sau:
Với việc làm trên, tất cả component bên trong <App/> sẽ có thể nhận dữ liệu từ store và đưa dữ liệu lên store.
Tại mỗi một thời điểm cụ thể, dữ liệu đang có trong store được gọi là state.
Tạo slice để định nghĩa các hàm xử lý state
Bạn có thể tạo nhiều slice để quản lý nhiều loại dữ liệu trong store. Nếu trong store có 3 loại dữ liệu thì tạo 3 slice. Mỗi slice là 1 file .js đặt trong src
Mỗi slide được tạo bằng hàm createSlice. Trong hàm createSlice cần khai báo 3 tham số: name là 1 tên định danh duy nhất của slice, initialState là giá trị khởi đầu cho state, tham số thứ ba reducers chứa các hàm (gọi là hàm reducers) xử lý state (thêm sửa xóa…) .
Cuối mỗi slide sẽ export các hàm reducers thành các action và export reducer.
// src/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'
const initialState = { value: 0, }
export const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0, value2: 0, },
reducers: {
increment: (state) => { state.value += 1 },
decrement: (state) => { state.value -= 1 },
incrementByAmount: (state, action) =>
{ state.value += action.payload },
},
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
Thêm slice vào store
Mở file store.js và định nghĩa slide trong mục reducer. Mục reducer này chúng ta khai báo tất cả các slice cần thiết. Trong ứng dụng có 3 slide thì tất cả khai báo chỗ này.
Khai báo này có nghĩa là chúng ta bảo cho redux biết từng loại dữ liệu trong store được quản lý bởi reducer nào.
//store.js
import { configureStore } from '@reduxjs/toolkit'
import counterSlice from './counterSlice'
export const store = configureStore({
reducer: {
counter:counterSlice
},
})
Sử dụng state và action trong component
Bây giờ thì code trong component có thể tương tác với redux store. Như là đọc thông tin từ store với useSelector và gửi action vào với useDispatch. Ví dụ tạo component src/Counter.js
// src/Counter.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './counterSlice'
export function Counter() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<button onClick={()=>dispatch(increment())}> Tăng </button>
<b> {count} </b>
<button onClick={()=>dispatch(decrement())} > Giảm </button>
</div>
)
}
// src/App.js
import { Counter } from "./Counter";
function App() { return ( <Counter />) }
export default App;
Sử dụng redux và redux toolkit như vậy thì dễ phải không nào. Nếu không có toolkit thì khó đó nha. Dùng redux để lưu các sản phẩm yêu thích, các sản phẩm khách đã chọn để mua (giỏ hàng), lưu các chức năng khách đã dùng, lưu các dữ liệu đang nhập dỡ dang của khách, lưu trang dữ liệu mà khách đang xem…
Cần xem thêm tài liệu thì xem ở đây https://redux-toolkit.js.org/tutorials/quick-start , https://react-redux.js.org/tutorials/quick-start
