Redux Lưu trữ bộ não của ứng dụng của bạn

Cách tốt nhất để kiến ​​trúc ứng dụng Redux của bạn

Bài viết này là về cách suy nghĩ trong Redux. Chúng tôi sẽ cố gắng hiểu làm thế nào chúng ta có thể sử dụng thư viện tuyệt vời này để làm cho ứng dụng của chúng tôi ổn định hơn, mạnh mẽ hơn và có thể bảo trì. Đó là thuyết bất khả tri về ngôn ngữ, tuy nhiên chúng tôi sẽ giữ phạm vi của mình thành Redux với React.

Đối với những người đã sử dụng Redux trước đây, tôi sẽ trích dẫn từ các tài liệu:

Redux là một thùng chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript.

Đây chỉ là một thư viện 2kb giải quyết một trong những vấn đề lớn nhất trong việc duy trì các ứng dụng JavaScript lớn: quản lý nhà nước.

Bài viết này không phải là về Redux, vì đã có rất nhiều bài viết về nó rồi. Thay vào đó, đó là về cách chúng ta nên hình dung một ứng dụng Redux và sử dụng nó một cách hiệu quả.

Hãy nói rằng chúng tôi đang xây dựng một ứng dụng thương mại điện tử nơi nó có một số trang cơ bản như danh mục, chi tiết sản phẩm và thanh toán thành công.

Dưới đây là các khung lưới về cách ứng dụng sẽ trông như thế nào:

Trang danh mụcTrang sản phẩmThanh toán thành công

Vì vậy, kiến ​​trúc trong Redux có nghĩa là chúng ta phải hình dung ứng dụng như một thực thể và mỗi trang là một thực thể phụ.

Có bốn giai đoạn để xây dựng một ứng dụng Redux:

  1. Hình dung cây nhà nước
  2. Thiết kế hộp giảm tốc của bạn
  3. Thực hiện các hành động
  4. Thực hiện thuyết trình

Bước 1: Trực quan hóa cây trạng thái

Từ các khung lưới ở trên, hãy để Thiết kế cây trạng thái của chúng tôi.

Cây trạng thái ứng dụng

Đây là bước quan trọng nhất. Sau khi chúng ta hoàn thành việc hình dung cây trạng thái của mình, việc thực hiện các kỹ thuật Redux trở nên thực sự dễ dàng! Các vòng tròn chấm là các trạng thái sẽ được chia sẻ bởi ứng dụng, các vòng tròn rắn là các trạng thái cụ thể theo trang.

Bước 2: Thiết kế bộ giảm tốc của bạn

Trong trường hợp bạn đang tự hỏi chính xác bộ giảm tốc là gì, tôi sẽ trích dẫn trực tiếp từ các tài liệu:

Các bộ giảm chỉ định cách trạng thái ứng dụng thay đổi trạng thái ứng phó với các hành động được gửi đến cửa hàng. Hãy nhớ rằng các hành động chỉ mô tả những gì đã xảy ra, nhưng don lồng mô tả cách ứng dụng thay đổi trạng thái.

Mỗi tiểu bang quan trọng có thể có bộ giảm tốc riêng. Sau đó, chúng ta có thể kết hợp chúng trong một bộ giảm gốc, cuối cùng sẽ xác định cửa hàng (nguồn duy nhất của sự thật của ứng dụng). Đây là nơi sức mạnh thực sự xuất hiện: bạn có toàn quyền kiểm soát các trạng thái và hành vi của họ. Không có gì đi ngoài cửa hàng. Người quan sát im lặng giữ đồng hồ.

Cửa hàng giữ đồng hồ

Hãy cùng kiểm tra một ví dụ về cách thiết kế bộ giảm tốc với sự trợ giúp của cây trạng thái ứng dụng mà chúng tôi đã thiết kế ở trên.

// Root Reducer
const rootReducer = mergReducer ({
  tiêu đề: headerReducer,
  đăng nhập: loginReducer,
  chân trang: footerReducer,
  chung: commonReducer,
  sản phẩm: sản phẩmReducer,
  danh mục: catalogReducer,
  thanh toán: PaymentReducer
});

Bộ giảm tốc gốc nói lên tất cả. Nó chứa mọi thứ mà cửa hàng cần biết về ứng dụng.

Bây giờ, hãy để một cái nhìn về cách một tiêu đề thực thể phụ trông như thế nào.

Hãy nhớ làm thế nào chúng ta thiết kế trạng thái tiêu đề của chúng tôi?

Cây trạng thái
// Giảm tiêu đề
const headerReducer = mergReducer ({
  menu: menuReducer,
  tìm kiếm: searchReducer,
  địa điểm: locationReducer
});

Bộ giảm tốc của chúng tôi là một bản sao của những gì chúng tôi thiết kế trước đó trong cây nhà nước của chúng tôi. Đây là sức mạnh của hình dung.

Lưu ý cách một bộ giảm tốc chứa nhiều bộ giảm tốc. Chúng tôi không cần phải tạo ra một bộ giảm tốc lớn. Nó có thể dễ dàng được chia thành các bộ giảm nhỏ hơn, vì mỗi bộ giữ các đặc điểm riêng và có các hoạt động cụ thể riêng. Điều này giúp chúng tôi tạo ra sự tách biệt logic, điều này rất quan trọng để duy trì các ứng dụng lớn.

Bây giờ, hãy để Lốc hiểu cách thiết lập một tập tin giảm tốc điển hình, ví dụ như searchReducer.

// Tìm kiếm Reducer
const initState = {
  khối hàng: [],
  Đang tải: sai,
  lỗi: {}
}
chức năng xuất searchReducer (state = initState, action) {
  chuyển đổi (hành động.type) {
    trường hợp FETCH_SEARCH_DATA:
      trở về {
        ...tiểu bang,
        Đang tải: đúng
    };
    
    trường hợp FETCH_SEARCH_SUCCESS:
      trở về {
        ...tiểu bang,
        tải trọng: action.payload,
        Đang tải: sai
      };
    
    trường hợp FETCH_SEARCH_FAILURE:
      trở về {
        ...tiểu bang,
        lỗi: hành động.error,
        Đang tải: sai
      };
    trường hợp RESET_SEARCH_DATA:
      trả về {... trạng thái, ... initState}
    mặc định:
      trạng thái trở lại;
  }
}

Mẫu trình giảm này xác định các thay đổi có thể có trong trạng thái tìm kiếm của nó khi API tìm kiếm được gọi.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Tất cả các bên trên là các hằng số có thể xác định những hành động có thể được thực hiện.

Lưu ý: Điều quan trọng là duy trì hành động RESET_SEARCH_DATA, trong trường hợp chúng ta cần đặt lại dữ liệu trong quá trình ngắt kết nối của một thành phần.

Bước 3: Thực hiện các hành động

Mọi hành động có lệnh gọi API thường trải qua ba giai đoạn trong một ứng dụng.

  1. Đang tải trạng thái -> FETCH_SEARCH_DATA
  2. Thành công -> FETCH_SEARCH_SUCCESS
  3. Thất bại -> FETCH_SEARCH_FAILURE

Việc duy trì các loại hành động này giúp chúng tôi kiểm tra luồng dữ liệu khi API được gọi trong ứng dụng của chúng tôi.

Hãy để Lặn đi sâu vào mã để hiểu một hành động điển hình sẽ như thế nào.

hàm xuất fetchSearchData (args) {
  trả lại async (công văn) => {
    // Bắt đầu trạng thái tải
    công văn ({
      loại: FETCH_SEARCH_DATA
    });
    thử {
      // Gọi API
      const result = await fetchSearchData (args.pageCount, args.itemsPerPage);
      
     // Cập nhật tải trọng giảm tốc khi thành công
     công văn ({
        loại: FETCH_SEARCH_SUCCESS,
        tải trọng: kết quả,
        currentPage: args.pageCount
      });
    } bắt (err) {
     // Cập nhật lỗi trong bộ giảm tốc khi thất bại
     công văn ({
        loại: FETCH_SEARCH_FAILURE,
        lỗi: lỗi
      });
    }
  };
}

Lưu ý cách lưu lượng dữ liệu được lưu trữ bởi cửa hàng thông qua các hành động. Điều này giữ mỗi và mọi thay đổi trong ứng dụng chịu trách nhiệm.

Do đó, các hành động tương tự được viết cho mỗi thay đổi trong các bộ giảm tốc của các trạng thái khác nhau.

Một trong những lợi ích lớn nhất của Redux là sự trừu tượng của từng hành động.

Luồng dữ liệu trong ứng dụng Redux

Bước 4: Thực hiện thuyết trình

nhập React, {Thành phần} từ 'Reac';
nhập {kết nối} từ 'Reac-redux'
nhập fetchSearchData từ './action/fetchSearchData';
nhập SearchData từ './SearchData';
const Tìm kiếm = (đạo cụ) => (
  
);
const mapStateToProps = (bang) => ({
  tìm kiếm: state.header.search.payload
});
const mapDispatchToProps = {
  fetchSearchData
};
xuất kết nối mặc định (mapStateToProps, mapDispatchToProps) (Tìm kiếm)

Như bạn có thể thấy, thành phần trình bày rất đơn giản và dễ hiểu.

Phần kết luận

Tôi muốn đề cập đến một số lợi ích lớn nhất mà tôi tìm thấy khi sử dụng Redux:

  1. Nó chắc chắn làm giảm mùi mã.
  2. Trừu tượng của mã là dễ dàng để đạt được.
  3. Redux cũng giới thiệu cho chúng tôi các nguyên tắc khác như bất biến, lập trình chức năng và nhiều nguyên tắc khác.
  4. Nó cho phép bạn hình dung từng hành động và theo dõi chúng với thời gian di chuyển.

Tôi hy vọng bài viết này giúp bạn có được một bức tranh rõ ràng hơn về lý do tại sao Redux thực sự tuyệt vời và làm thế nào chúng ta có thể sử dụng sức mạnh của trực quan hóa để tạo ra các ứng dụng có thể bảo trì.

Theo dõi tôi trên twitter để có thêm thông tin cập nhật liên quan đến các bài viết mới và để được cập nhật trong các phát triển frontend mới nhất. Cũng chia sẻ bài viết này trên twitter để giúp những người khác biết về nó. Chia sẻ là quan tâm ^ _ ^.

Hãy nhớ rằng bạn có thể vỗ tay tới 50 lần để thể hiện tình yêu của mình!

Một số tài nguyên hữu ích

  1. https://redux.js.org/
  2. https://github.com/reduxjs/redux/blob/master/examples
  3. https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.c4yhhvk0d

Bài viết trước của tôi

  1. https://medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  2. https://codeburst.io/redux-observable-to-the-resTHER-b27f07406cf2
  3. https://codeburst.io/building-webapp-for-the-future-68d69054cbbd
  4. https://codeburst.io/cors-story-of-requesting-twice-85219da7172d