• Privacy Policy
Chia sẻ kiến thức công nghệ
  • Home
  • Lập trình
  • Chia sẻ
  • Blog
No Result
View All Result
  • Home
  • Lập trình
  • Chia sẻ
  • Blog
No Result
View All Result
Duy PT Blog
No Result
View All Result
Home React

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

Duy Solo by Duy Solo
August 28, 2021
in React
Reading Time: 4 mins read
A A
Share on FacebookShare on Twitter

Mục lục

  1. Redux là gì
  2. 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.

Tags: reactreact hooksreact nativereactjsreduxstate management

Related Posts

No Content Available
Load More
Next Post

Giới thiệu series NestJS

Tổng quan NestJS và cài đặt

Discussion about this post

POPULAR POST

  • LocalStorage và Cookies – chọn cái nào để lưu JWT Tokens hiệu quả và an toàn?

    1066 shares
    Share 426 Tweet 267
  • Hướng dẫn reset trial cho các sản phẩm IntelliJ trên MacOS

    933 shares
    Share 373 Tweet 233
  • Repository Design Pattern và ứng dụng của nó trong Laravel

    919 shares
    Share 368 Tweet 230
  • Decorators trong Typescript

    848 shares
    Share 339 Tweet 212
  • Các thư viện Date Pickers tốt nhất cho React

    743 shares
    Share 297 Tweet 186
Duy PT Blog

© 2021 Duy PT Blog

Liên kết

  • Lập trình
  • Chia sẻ
  • Blog
  • Privacy Policy

Theo dõi

No Result
View All Result
  • Home

© 2021 Duy PT Blog