Redux cơ bản

Trần Đức Lĩnh

Redux là gì.

  • Redux là:

    • Thư viện JS giúp quản lý state của toàn bộ ứng dụng mà không phải thông qua một handle function nào.
    • Sử dụng kiến trúc Uni-directional data flow.
  • Liên quan đến ES6:

    • Destructurings.
    • Rest parameters.
    • Spread operator.

Cấu trúc tổng quát.

redux

Trong đó_

  • Actions:

    • Là những chỉ thị bao gồm các thuộc tính bắt buộc là (type).

      • Type (Chứa tên chỉ thị).
      • Item (Phần tử thao tác).
      • Hành động sau đó.

        • Action không trực tiếp thực hiện mà đưa ra chỉ thị.
        • Reducer là người thực hiện chi tiết.
  • Reducer:

    • Là một hành động.

      • Hành động này sẽ trả về một state.
      • Có hai tham số bao gồm:

        • previousState.
        • action.
      • ^ Từ 2 tham số trên sẽ tạo ra newState mới.

        • Action dùng để thay đổi state cũ và tính toán ra state mới.
    • combineReducers().

      • Tập hợp các file reducers vào 1 file duy nhất.
    • Nên clone { ... state; }
  • Store:

    • Là một đối tượng quản lý Reducer và State, vì State là private, không thể thay đổi trực tiếp được, mà thông qua đối tượng quản lý của nó là Store.
    • Hỗ trợ:

      • getState(): Lấy state hiện tại của store.
      • Provider:

        • Kết nối React và Redux.
        • Là một component cung cấp bởi react-redux.
        • Cung cấp store cho component con.
      • dispatch(action): Thực hiện gọi 1 action.
      • subscribe(listener): Lắng nghe và cập nhật ra view khi có thay đổi.
  • Dispatcher:

    • Trống.
  • State:

    • Lưu trữ dữ liệu cho các Component trong ReactJS, dùng để cập nhật component khi người dùng thực hiện một số hành động như click, nhập văn bản, nhấn phím...
  • Middlware:

    • Trống.

Khái niệm hơn.

  • useSelector():

    • Cho phép lấy State từ Redux store bằng cách sử dụng một Selector function là tham số đầu vào.
    • Nhược điểm: Tránh việc re-render nhiều lần có thể dử dụng HOC (React.memo()).
  • useDispatch():

    • Chỉ return về một tham chiếu đến Dispatch function từ Redux store và được sử dụng để dispatch các Action.