Khi nào tôi nên thêm Redux vào ứng dụng React?

Question

Tôi hiện đang học React và tôi đang cố gắng tìm hiểu cách sử dụng nó với Redux để xây dựng ứng dụng dành cho thiết bị di động. Tôi hơi bối rối về việc hai người có liên quan/có thể sử dụng cùng nhau như thế nào. Ví dụ, tôi đã hoàn thành hướng dẫn này trong React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript, nhưng bây giờ tôi muốn chơi xung quanh với thêm một số bộ giảm tốc/hành động cho ứng dụng đó và tôi không chắc chắn nơi những người sẽ gắn liền với những gì tôi đã làm.

Answer 1

Phản hồi là một khung giao diện người dùng chịu trách nhiệm cập nhật giao diện người dùng theo "nguồn gốc của sự thật" thường được mô tả là trạng thái "được sở hữu" bởi một số thành phần. Thinking in React mô tả khái niệm quyền sở hữu trạng thái React rất tốt và tôi khuyên bạn nên thực hiện nó.

Mô hình quyền sở hữu nhà nước này hoạt động tốt khi trạng thái phân cấp và nhiều hay ít khớp với cấu trúc thành phần. Bằng cách này, nhà nước được "trải ra" trên nhiều thành phần và ứng dụng rất dễ hiểu.

Tuy nhiên, đôi khi các phần xa của ứng dụng muốn có quyền truy cập vào cùng một trạng thái, ví dụ: nếu bạn đã tìm nạp bộ nhớ cache và muốn cập nhật liên tục ở mọi nơi cùng một lúc. Trong trường hợp này, nếu bạn theo dõi mô hình React, bạn sẽ kết thúc với một loạt các thành phần rất lớn ở trên cùng của cây thành phần mà truyền vô số các đạo cụ xuống qua một số thành phần trung gian không sử dụng chúng, đạt được một vài thành phần lá thực sự quan tâm đến dữ liệu đó.

Khi bạn thấy mình trong tình huống này, bạn có thể (nhưng không phải) sử dụng Redux để "trích xuất" logic quản lý trạng thái này từ các thành phần cấp cao thành các chức năng riêng biệt được gọi là "bộ giảm tốc" và " kết nối ”các thành phần lá quan tâm đến trạng thái đó trực tiếp với nó thay vì truyền các đạo cụ thông qua toàn bộ ứng dụng. Nếu bạn chưa có vấn đề này, có thể bạn không cần Redux.

Cuối cùng, lưu ý rằng Redux không phải là giải pháp cuối cùng cho vấn đề này. Có nhiều cách khác để quản lý trạng thái địa phương của bạn bên ngoài các thành phần React — ví dụ: một số người không thích Redux hài lòng với MobX. Tôi sẽ đề nghị bạn đầu tiên hiểu rõ mô hình trạng thái React và sau đó đánh giá các giải pháp khác nhau một cách độc lập và xây dựng các ứng dụng nhỏ với chúng để hiểu được điểm mạnh và điểm yếu của chúng.

(Câu trả lời này được lấy cảm hứng từ hướng react-howto Pete Hunt, tôi đề nghị bạn đọc nó là tốt.)

Answer 2

Tôi đã phát hiện ra rằng con đường lý tưởng cho việc thêm Redux đến một ứng dụng/chồng là phải chờ cho đến khi sau bạn/ứng dụng/nhóm đang cảm thấy đau đớn mà nó giải quyết. Khi bạn bắt đầu thấy chuỗi dài của việc xây dựng và chuyển qua nhiều cấp độ thành phần hoặc tìm kiếm của mình để phối hợp các thao tác/lần đọc trạng thái phức tạp, đó có thể là dấu hiệu cho thấy ứng dụng của bạn có thể hưởng lợi từ việc giới thiệu Redux et al.

Tôi khuyên bạn nên dùng một ứng dụng mà bạn đã tạo bằng "chỉ React" và xem cách Redux có thể phù hợp với nó. Xem bạn có thể giới thiệu nó một cách duyên dáng bằng cách tuốt ra một phần của trạng thái hoặc đặt "hành động" cùng một lúc. Refactor hướng tới nó, mà không bị treo lên trên một vụ nổ lớn viết lại ứng dụng của bạn. Nếu bạn vẫn gặp khó khăn khi nhìn thấy nơi nó có thể thêm giá trị, thì đó có thể là dấu hiệu cho thấy ứng dụng của bạn không đủ lớn hoặc phức tạp để xứng đáng với thứ như Redux trên đầu trang của React.

Nếu bạn chưa từng gặp, Dan (đã trả lời ở trên) có một chuỗi video ngắn tuyệt vời đi qua Redux ở cấp độ cơ bản hơn. Tôi khuyên bạn nên dành một chút thời gian hấp thụ các phần của nó: https://egghead.io/series/getting-started-with-redux

Redux cũng có một số tài liệu tuyệt vời.Đặc biệt giải thích rất nhiều "lý do" như http://redux.js.org/docs/introduction/ThreePrinciples.html

Answer 3

Thứ nhất, bạn không cần thêm Redux vào đơn đăng ký của mình nếu bạn không cần! Đơn giản, vì vậy đừng ép buộc bạn đưa nó vào dự án của bạn nếu bạn không cần nó! Nhưng điều đó không có nghĩa là Redux là không tốt, nó thực sự hữu ích trong các ứng dụng lớn, do đó, đọc trên ...

Redux là một quản lý nhà nước cho ứng dụng React của bạn, hãy nghĩ về Redux như một cửa hàng địa phương theo dõi trạng thái của bạn khi bạn đi, bạn có thể truy cập trạng thái trong bất kỳ trang nào và tuyến đường bạn muốn, cũng so sánh với Flux, bạn chỉ có một cửa hàng, có nghĩa là một nguồn ...

Nhìn vào hình ảnh này để hiểu những gì Redux làm trước trong nháy mắt:

Đây cũng là cách Redux i ntroduce chính nó:

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

Nó giúp bạn viết các ứng dụng hoạt động nhất quán, chạy trong môi trường khác nhau (máy khách, máy chủ và bản địa) và dễ dàng để thử nghiệm . Trên hết, nó cung cấp trải nghiệm nhà phát triển tuyệt vời, chẳng hạn như làm chỉnh sửa mã trực tiếp kết hợp với trình gỡ lỗi thời gian di chuyển.

Bạn có thể sử dụng Redux cùng với React hoặc với bất kỳ thư viện chế độ xem nào khác. Nó rất nhỏ (2kB, bao gồm cả phụ thuộc).

Cũng theo tài liệu hướng dẫn, có ba nguyên tắc cho Redux như sau:

1. nguồn Độc thân của chân lý

2. Nhà nước là chỉ đọc

3. Các thay đổi được thực hiện với các chức năng thuần túy

Vì vậy, về cơ bản khi bạn cần đến một cửa hàng duy nhất để theo dõi bất cứ điều gì bạn thích trong ứng dụng của bạn, sau đó Redux là tiện dụng, bạn có thể truy cập nó bất cứ nơi nào trong ứng dụng của bạn, trong bất kỳ tuyến đường ... chỉ đơn giản là sử dụng store.getState();

Cũng sử dụng phần mềm trung gian Redux, bạn có thể quản lý trạng thái tốt hơn nhiều, có danh sách các thành phần tiện dụng và phần mềm trung gian trên trang chính thức của Redux!

Đơn giản nếu ứng dụng của bạn sẽ lớn, với nhiều thành phần, trạng thái và định tuyến cố gắng triển khai Redux ngay từ đầu! Nó sẽ giúp bạn trên đường cho chắc chắn!

Answer 4

Khi viết ứng dụng, chúng tôi cần quản lý trạng thái của ứng dụng. React quản lý các trạng thái cục bộ trong thành phần nếu chúng ta cần chia sẻ các trạng thái giữa các thành phần chúng ta có thể sử dụng các đạo cụ hoặc gọi lại.

Nhưng khi ứng dụng phát triển, việc quản lý trạng thái và chuyển đổi trạng thái trở nên khó khăn.Chuyển đổi trạng thái và trạng thái cần phải được theo dõi đúng để gỡ lỗi ứng dụng.

Redux là một container nhà nước có thể dự đoán cho các ứng dụng JavaScript để quản lý sự biến đổi trạng thái và nhà nước và thường được sử dụng với Phản ứng,

Khái niệm về Redux có thể được giải thích trong sau hình ảnh.

Khi người dùng kích hoạt một hành động khi người dùng tương tác với các thành phần và hành động được cử để lưu trữ thì giảm tốc trong các cửa hàng chấp nhận hành động và cập nhật trạng thái của ứng dụng và lưu trữ trong ứng dụng rộng rãi bất biến biến toàn cầu khi có bản cập nhật trong cửa hàng thành phần xem tương ứng được đăng ký với tiểu bang sẽ được cập nhật.

Vì trạng thái được quản lý trên toàn cầu và với quá trình chuyển đổi, nó dễ bảo trì hơn.