Sự khác biệt cốt lõi của redux và trào ngược trong việc sử dụng ứng dụng dựa trên phản ứng là gì?

Question

Gần đây tôi đã tiến hành một nghiên cứu sơ bộ về phát triển một trang web thương mại điện tử và phát hiện ra rằng redux và reflux cả hai đều đến từ flux architecture trong Facebook và cả hai đều phổ biến. Tôi bối rối về sự khác biệt giữa hai người.

Khi nào tôi nên sử dụng redux so với trào ngược và điều gì linh hoạt nhất trong giai đoạn phát triển của ứng dụng web thương mại điện tử?

Answer 1

Tôi muốn viết một câu trả lời tập trung vào sự khác biệt cụ thể giữa trào ngược và Redux. @Mijamo đi vào cốt lõi của lý do tại sao họ có nguồn gốc là những thứ khác nhau và là một bản tóm tắt rất tốt nếu bạn có bối cảnh, nhưng tôi đã đến câu hỏi này để biết cụ thể sự khác biệt giữa hai từ góc độ phát triển. Thấy như tôi đã đi vào và đọc tất cả mọi thứ như thế nào, tôi muốn viết một câu trả lời. Tôi sẽ cập nhật câu trả lời này với nhiều ví dụ mã hơn.

Flux (Nhanh chóng tổng quan)

Trước khi chúng tôi đi vào này, tôi nghĩ có một điều mà chúng ta nên lưu ý di chuyển về phía trước được suy nghĩ về Flux hiện và làm thế nào nó hiện handle rộng một ứng dụng với nhiều thành phần hoặc nhiều khác nhau các phần của các tiểu bang cần được quản lý. Đây là một vấn đề khá hay và giải pháp mà họ đưa ra không phải là quá xa so với những gì mà Reflux và Redux cho phép bạn làm, nhưng tóm lại, một câu hỏi lớn là "Chúng tôi làm gì khi chúng tôi có các thành phần "Cuối cùng một câu trả lời mà rất nhiều các khung công tác này đến là chúng ta cần ý tưởng này về một trạng thái toàn cầu. Chắc chắn, cả hai khung giới thiệu một số khái niệm tương tự để đạt được điều này mà chúng ta sẽ đi vào bên dưới.

Bởi vì tôi sẽ cần phải tham khảo sự so sánh giữa Flux, tôi chỉ muốn thể hiện một quick overview way Flux works với hình dưới đây:

trào ngược

Trong trào ngược, không có điều phối, và các thành phần View trực tiếp giao tiếp thông qua các thành phần thông qua các hành động.

+---------+  +--------+  +-----------------+ 
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦ 
+---------+  +--------+  +-----------------+ 
    ^         ¦ 
    +--------------------------------------+ 

Xét về cách nó khác với Flux, không có quá nhiều. Bạn vẫn tạo ra các hành động của riêng bạn và tạo ra các cửa hàng của riêng bạn, và bạn vẫn có các cửa hàng của bạn lắng nghe các hành động. Tôi tin rằng sự khác biệt lớn nhất là để các thành phần Xem gửi các hành động trực tiếp đến cửa hàng thay vì đi qua một điều phối viên, các Thành phần có một thuộc tính cửa hàng mở rộng từ Reflux.Component thay vì React.Component để nó có cách trực tiếp móc vào một cửa hàng. tức là ví dụ này

class MyComponent extends Reflux.Component 
{ 
    constructor(props) 
    { 
     super(props); 
     this.state = {}; // our store will add its own state to the component's 
     this.store = StatusStore; // <- just assign the store class itself 
    } 

    render() 
    { 
     var flag = this.state.flag; // <- flag is mixed in from the StatusStore 
     return <div>User is {flag}</div> 
    } 
} 

Bạn cũng có khả năng để móc vào nhiều cửa hàng (có một prop Tôi tin rằng gọi stores mà phải mất một mảng và trào ngược cũng tàu với khả năng chỉnh sửa mapStoreToState trong trường hợp bạn muốn kiểm soát đặc biệt như thế nào các cửa hàng vượt qua nhà nước để các thành phần.

Đương nhiên bởi vì bạn đang sử dụng một thành phần mà tàu với, có lẽ bạn nên đọc của họ documentation on Reflux Component và làm thế nào để làm cho đúng các thành phần với điều này trong tâm trí

điều cuối cùng tôi sẽ trào ngược lưu ý ở trên tôi đề cập d vấn đề lớn là tình trạng toàn cầu và làm thế nào để giải quyết vấn đề này. Trào ngược có Reflux.GlobalState có thể được đóng góp miễn là bạn đặt id trên Cửa hàng của mình. Liên kết ở trên có nhiều chi tiết hơn nhưng với điều này, bạn có thể truy cập chúng qua Reflux.GlobalState.[StoreID].[property] trong đó StoreID là id bạn chỉ định cửa hàng và property là phần trạng thái thực sự bạn muốn truy cập.

Redux

Tự sửa đổi và thay đổi rất nhiều thứ và cũng làm mất ý tưởng của người điều phối. Trước khi tôi đi sâu vào nó, tôi muốn làm nổi bật số three principles mà họ đề cập trong tài liệu của họ.

1. nguồn Độc thân của chân lý
2. Nhà nước là chỉ đọc
3. Những thay đổi được thực hiện với các chức năng tinh khiết

Trong Redux, có thực sự chỉ là một trạng thái toàn cầu bạn phải đối phó với và là trạng thái toàn cầu cho ứng dụng của bạn (giải quyết vấn đề lớn). Mặc dù bạn vẫn có các hành động và cửa hàng, nhưng các cửa hàng tự chịu trách nhiệm theo dõi trạng thái riêng của họ trong cây trạng thái toàn cầu, cho phép bạn gửi các hành động để thực hiện các thay đổi đối với cây trạng thái và cho phép bạn truy cập trạng thái. Bạn cũng có thể đặt người nghe trên các cửa hàng này qua số subscribe.

Động lực lớn của việc này đi vào hai nguyên tắc đầu tiên.Trong Flux hoặc thậm chí là Reflux, nếu bạn muốn chắc chắn rằng không có gì thay đổi trạng thái khi bạn không muốn nó (bởi vì về mặt kỹ thuật bạn có thể truy cập và thay đổi trạng thái trong các cửa hàng bất cứ khi nào bạn muốn), bạn sẽ phụ thuộc vào những thứ như ImmutableJS chắc chắn rằng bạn không vô tình biến đổi trạng thái. Redux mặt khác làm cho nó, do đó bạn chỉ có thể truy cập vào nhà nước thông qua các cửa hàng/selectors và thực hiện thay đổi chỉ thông qua các hành động dispatching (nguyên tắc thứ ba).

Một điều thú vị cần lưu ý là trong khi Reflux và Flux có các hành động trong cửa hàng bạn sẽ nghe và xác định trạng thái thay đổi, các cửa hàng trong Redux chỉ gửi một thông điệp với tải trọng bạn muốn và sau đó đi qua một tuyên bố chuyển đổi khổng lồ để xác định những gì nó nên làm với cây trạng thái - đây là những gì họ gọi là một giảm. Điều này không khác gì Flux có reduce trong Cửa hàng nhưng Redux tách khái niệm này ra sao và cây trạng thái toàn cầu của bạn đi qua một số rootReducer (Redux có chức năng tốt cho bạn combineReducers và tạo rootReducer). Một cách tốt để suy nghĩ về nó là bạn gửi một thay đổi cho cây trạng thái khổng lồ và sau đó bất cứ thay đổi nào bạn muốn, nó sẽ bị giảm hoặc ngưng tụ đến trạng thái cuối cùng mà bạn muốn. Điều này thực sự ảnh hưởng như thế nào redux thiết lập rất nhiều thứ để nó cho React làm thế nào để trở lại (giả sử bạn đang sử dụng Redux với React).

Các data flow của Redux nói về thực sự tốt trong liên kết tôi đã đề cập ở trên, nhưng đó cũng là một thông tin đồ họa khá tốt Tôi có kèm theo

khác biệt Vì vậy, cốt lõi thực sự là

• Redux có một cách tiếp cận hoàn toàn khác với quản lý nhà nước - nó bao trùm ý tưởng rằng có một trạng thái toàn cầu và chắc chắn nếu bạn muốn thay đổi, nó chỉ xảy ra re theo cách rất cụ thể (cách bạn xử lý những thành phần nào có quyền truy cập vào trạng thái nào tùy thuộc vào bạn).
• Trào ngược thực sự cố gắng hỗ trợ cho các thành phần khả năng truy cập nhiều cửa hàng mà không phải thay đổi quá nhiều thông tin ban đầu về số (Tôi muốn nghĩ rằng Reflux là những gì nên có).
• Redux thực sự thay đổi cách cây trạng thái được quản lý và cung cấp các trách nhiệm khác nhau và thay đổi cách thông tin trạng thái được ánh xạ tới các thành phần, trong khi Reflux chỉ đơn giản là tách ra một người đàn ông trung gian . cửa hàng họ cần phải dễ dàng hơn.

Hy vọng điều này sẽ giúp bạn hiểu rõ hơn về những khác biệt cốt lõi giữa chúng.

Answer 2

Thông lượng, phản xạ và Redux (và nhiều thư viện tương tự khác) là tất cả các cách khác nhau để xử lý việc quản lý dữ liệu ngang.

Các thành phần React cơ bản hoạt động tốt với các mối quan hệ cha-con, nhưng khi bạn phải cung cấp và cập nhật dữ liệu từ các phần khác nhau của ứng dụng không được kết nối trực tiếp, nó có thể trở nên lộn xộn. Những thư viện này cung cấp các cửa hàng và hành động (và các cơ chế khác) để duy trì và cập nhật dữ liệu đó.

Thông lượng là giải pháp ban đầu được phát triển bởi Facebook (giống như React), nó mạnh mẽ nhưng có lẽ không phải là dễ nhất hoặc dễ đọc. Trào ngược được phát triển một phần để làm cho nó dễ dàng hơn và rõ ràng hơn. Điểm khác biệt chính là trong Reflux, mọi phần dữ liệu đều có kho lưu trữ và hành động riêng, điều này khiến cho nó dễ đọc và dễ viết. Thật không may, Reflux không còn được phát triển tích cực nữa, tác giả đang tìm kiếm những người bảo trì. Nhưng tất cả trong tất cả tôi sẽ nói Reflux là một sự thay thế thanh lịch hơn cho Flux.

Redux là một giải pháp khác, vốn đã trở thành giải pháp phổ biến nhất từ ​​trước tới nay. Lợi thế của nó là nó cung cấp các cửa hàng lồng nhau với nội dung không thay đổi để bạn có thể dễ dàng thực hiện tính năng trước đó/tiếp theo và có các hành động ngang có tác động đến nhiều phần của cửa hàng. Nhược điểm của Redux là nó khá dài và có nhiều khái niệm hơn Flux hoặc Reflux. Đối với các hành động cơ bản giống nhau, nó sẽ cần nhiều mã hơn, và việc triển khai async không phải là sạch nhất. Nó chắc chắn mạnh mẽ và có khả năng mở rộng.

Dưới đây là một liên kết mà nói về nó rộng rãi hơn: http://jamesknelson.com/which-flux-implementation-should-i-use-with-react/