Using the Redux Store

Có hai cách liên kết component với store:

1. Sử dụng hàm connect của thư viện react-redux.
2. Sử dụng hook useSelector và useDispatch của thư viện react-redux.

Ví dụ bên dưới minh họa cho cách thứ hai:

import { useSelector, useDispatch } from "react-redux"
 
function Counter() {
  const count = useSelector((state) => state.count)
  const dispatch = useDispatch()
 
  function increment(amount) {
    return dispatch({ type: "counter/increment", payload: amount })
  }
 
  function decrement(amount) {
    return dispatch({ type: "counter/decrement", payload: amount })
  }
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => increment(1)}>+1</button>
      <button onClick={() => decrement(1)}>-1</button>
    </div>
  )
}
 
export default Counter

Ta sẽ phân tích cụ thể nhiệm vụ của từng hook ở trong component trên:

useSelector

Hook useSelector có đối số là một selector và có giá trị trả về là state cần lấy.

const count = useSelector((state) => state.count)

Bất cứ khi nào xảy ra một sự kiện và store được cập nhật, useSelector sẽ chạy lại selector. Nếu có sự khác biệt giữa state cũ và state mới, useSelector sẽ đảm bảo component cần phải được re-render dựa trên state mới.

useDispatch

Hàm dispatch nhận được từ useDispatch sẽ giúp chúng ta dispatch các action đến store.

const dispatch = useDispatch()

Sử dụng dispatch và truyền vào các action để tạo ra các event handler như sau:

function increment(amount) {
  return dispatch({ type: "counter/increment", payload: amount })
}
 
function decrement(amount) {
  return dispatch({ type: "counter/decrement", payload: amount })
}

Truyền các event handler vào các thuộc tính sự kiện:

<button onClick={() => increment(1)}>+1</button>
<button onClick={() => decrement(1)}>-1</button>

Use Local State

Các state không được chia sẻ giữa nhiều component khác nhau thì không cần đưa nó vào store. Thay vào đó, hãy sử dụng local state.

Để xác định xem khi nào thì cần đưa local state vào Redux store, ta cần trả lời các câu hỏi sau:

• State đó có được sử dụng để vận hành nhiều component khác nhau hay không?
• Có cần tạo ra các state dẫn xuất từ state đó hay không?
• Chúng ta có cần cache lại state đó hay không?

Ngoài ra, không nên đưa state của form vào store. Thay vào đó, ta nên giữ chúng ở local, khi nào người dùng hoàn tất quá trình nhập form và submit, chúng ta mới cần dispatch toàn bộ state của form vào store.