1/ Redux là gì?
Để bắt đầu tìm hiểu xem Redux là gì, chúng ra hãy đến với 1 vấn đề gặp phải khi viết một ứng dụng React.
Bình thường thì state được quản lý nội bộ trong 1 component, có nghĩa là việc thay đổi state chỉ được diễn ra ở trong component đó thông qua các sự kiện (events). Nếu muốn thay đổi state từ bên ngoài đều phải truyền qua props. Vấn đề ở đây là khi có rất nhiều component được viết lồng vào nhau, việc chuyển đổi props sang state sẽ rất phức tạp và được thể hiện ở hình dưới đây:
Redux được sinh để khắc phục được vấn đề trên.
Redux là một State Management Tool cho các ứng dụng js nói chung và react nói riêng. Ngày này ta cũng có thể thấy redux xuất hiện trong các framework khác ngoài js có sử dung state như là Flutter. Redux được lấy cảm hứng từ kiến trúc Flux (Flux architecture) của facebook nên cũng dễ hiểu khi redux thường được sử dụng trong các ứng dụng react. Các state sẽ được lưu trữ trong store, mọi action từ các component khác sẽ đi vào reducer xử lý và tác động để update state.
2. Cài đặt và tạo một store bằng Redux
2.1. Cài đặt
| # NPM npm install redux # Yarn yarn add redux |
2.2. Khởi tạo store
| import { createStore } from ‘redux’ function counterReducer(state = { count: 0 }, action) { switch (action.type) { case ‘counter_incremented’: return { count: state.count + 1 } case ‘counter_decremented’: return { count: state.count – 1 } default: return state } } let store = createStore(counterReducer) store.subscribe(() => console.log(store.getState())) store.dispatch({ type: ‘counter_incremented’ }) // {count: 1} store.dispatch({ type: ‘counter_incremented’ }) // {count: 2} store.dispatch({ type: ‘counter_decremented’ }) // {count: 1} |
Chúng ta vừa khởi tạo 1 Store cơ bản nhất bằng redux với 1 state duy nhất là count. Các action bắt buộc phải khai báo type và trả về type để cho reducer sử dụng switch để lắng nghe các action. Ngoài ra để cho các action không bị trùng lặp, khi khai báo 1 action type thì chúng ta cũng phải khai báo theo dạng như sau:
| const MODULE = ‘YOUTUBE’ export const ACTION_ADD_YOUTUBE_VIDEO = `${MODULE}_ADD_VIDEO` export const ACTION_EDIT_YOUTUBE_VIDEO = `${MODULE}_EDIT_VIDEO` |
Thực tế khi triển khai redux ở dự án Landing Page thì cảm nhận của mình đó là nó khá là dài dòng và không thấy có 1 quy chuẩn nào cho việc xử lý logic trong reducer.
Thời gian vừa rồi, team khi làm phần Theme Builder có chuyển qua một hướng tiếp cận mới đó là sử dụng Redux Toolkit (RTK) để thay thế cho Redux truyền thống.
3. Cài đặt và tạo store bằng RTK
3.1. Cài đặt
| # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit |
3.2. Khởi tạo store
| import { createSlice, configureStore } from ‘@reduxjs/toolkit’ const counterSlice = createSlice({ name: ‘counter’, initialState: { count: 0 }, reducers: { incremented: state => { state.count += 1 }, decremented: state => { state.count -= 1 } } }) export const { incremented, decremented } = counterSlice.actions const store = configureStore({ reducer: counterSlice.reducer }) // Can still subscribe to the store store.subscribe(() => console.log(store.getState())) // Still pass action objects to `dispatch`, but they’re created for us store.dispatch(incremented()) // {count: 1} store.dispatch(incremented()) // {count: 2} store.dispatch(decremented()) // {count: 1} |
Xem qua phần khởi tạo store, chúng ta có thể thấy là RTK đã quy chuẩn hoá việc viết actions và reducers một cách ngắn gọn hơn bằng việc tạo ra createSlice. Nếu cần export action nào chỉ việc trích xuất từ slice.actions ra, việc xử lý logic trong reducer sẽ được viết trong reducers của createSlice. Trường name khi khởi tạo createSlice cũng sẽ tự động tạo ra các prefix cho các action để tránh việc trùng lặp action type được nói ở trên khi sử dụng Redux.
| // counter/incremented // counter/decremented |
Easyhoon :)))
4. Redux hay Redux Toolkit (RTK)?
Vậy đến đây, câu hỏi đặt ra là: Nên sử dụng Redux hay Redux Toolkit?
Cá nhân mình thấy khi triển khai các dự án thực tết thì RTK như là 1 next generation của Redux. Các ưu điểm dễ nhận thấy đó là việc code có tổ chức hơn, ngắn gọn hơn trong khi vẫn mang đầy đủ tính năng của Redux.
Tuy nhiên, khi mới tiếp cận thì recommend vẫn là Redux vì lúc này, các bạn sẽ hiểu được các thành phần cơ bản trong 1 store là gì, cách xử lý như thế nào. Đến khi đó, việc chuyển sang RTK sẽ không mất nhiều thời gian đâu.
Happy coding!!!
