Redux là gì – Có thể dùng useReducer để thay thế Redux hay không?

Redux là gì

Redux là một framework quản lý state dựa trên ý tưởng: tất cả các state của ứng dụng sẽ được lưu xuống một global state và sử dụng các reducer function để tương tác với chúng.

Để quản lý state, bạn cần tạo ra một function với 2 tham số: state – ứng với old state trước đó, và action – một object mô tả việc thay đổi state.

const reducer = (state: string, action: Action) => {
  switch (action.type) {
    case 'SET_VALUE':
      return action.payload
    default:
      return state
  }
}

Hàm reducer trong ví dụ này đại diện cho một state với kiểu string. Nó chỉ xử lý duy nhất 1 hành động: SET_VALUE. Nếu type của action không phải là SET_VALUE, hàm sẽ mặc định trả về giá trị state không thay đổi.

Sau khi chúng ta đã có hàm reducer, chúng ta sẽ khởi tạo một store bằng hàm createStore của Redux.

const store = createStore(reducer, 'Hello World')

Store cung cấp phương thức subscribe cho phép chúng ta hứng một event mỗi khi có thay đổi trên state.

store.subscribe(() => {
  const state = store.getState()
  console.log(state)
})

Ở đây mình viết một callback để log lại giá trị của state vào console mỗi khi có sự thay đổi state.

store.dispatch({
  type: 'SET_VALUE',
  payload: 'Hello DuyPT Dev',
})

Ở đây mình truyền vào một object có type là SET_VALUE, payload là string. Tất cả các action truyền vào dispatch đều cần có type với kiểu string và một payload (optional).

Redux sử dụng Flux action format. Bạn có thể tham khảo nó ở đây: https://github.com/redux-utilities/flux-standard-action.

Thông thường, để tránh phải nhớ và khai báo action nhiều chỗ, mọi người sử dụng action creator function:

const setValue = (value: string) => ({
  type: 'SET_VALUE',
  payload: value,
})

Bản chất của Redux cũng khá dễ hiểu đúng không ^_^

 

Có thể dùng useReducer để thay thế Redux hay không?

Kể từ phiên bản 16.8 React hỗ trợ Hooks. Một trong số đó là hook useReducer hoạt động theo một cách rất giống với Redux.

Như vậy, tại sao chúng ta cần Redux trong khi chúng ta đã có một công cụ mặc định cho phép chúng ta quản lý state với reducer function?

Chúng ta có thể cung cấp nó như một global state trên toàn bộ ứng dụng bằng cách sử dụng Context API – tuy nhiên, liệu có đủ không?

Redux cung cấp cho chúng ta một vài lợi thế quan trọng:

• Browser Tools: bạn có thể sử dụng React Dev Tools để debug ứng dụng của mình. Nó cho phép chúng ta xem lại các dispatched actions, kiểm tra state và time travel. Bạn có thể chuyển đổi qua lại lịch sử của action và kiểm tra state trông như thế nào sau mỗi dispatched action.
• Xử lý Side Effects: Với useReducer, bạn phải tự tổ chức code của mình khi xử lý network requests. Redux cung cấp Middleware API giúp xử lý điều đó. Ngoài ra, có những công cụ như Redux Thunk giúp công việc này trở nên dễ dàng hơn.
• Testing: Redux dựa trên các pure function nên dễ dàng thực hiện kiểm thử. Tất cả các bài test đều tập trung vào việc kiểm tra outputs dựa trên các inputs đã cho.
• Patterns và tổ chức code: Redux được nghiên cứu kỹ lưỡng và có công thức cho hầu hết các vấn đề. Có một phương pháp gọi là Ducks mà bạn có thể sử dụng để tổ chức code Redux.

 

Mình sẽ tạm dừng bài viết ở đây. Hẹn gặp lại các bạn trong bài tiếp theo.