Bối rối về kiến ​​trúc Flux của React - waitFor

Question

Tôi có cách riêng về cách sử dụng React và xây dựng khung làm việc của riêng mình, lấy cảm hứng từ Om. Tôi đang thực hiện một cái gì đó một chút tương tự như kiến ​​trúc Flux, với các cửa hàng có thể tự cập nhật trên một số sự kiện.

Điều tôi không chắc chắn là lý do tại sao trong cấu trúc Flux chúng ta có cần phụ thuộc cửa hàng không?

Các cửa hàng không được coi là chủ sở hữu dữ liệu độc lập cho một ngữ cảnh bị ràng buộc nhất định, như chúng tôi làm với kiến ​​trúc CQRS?

Trong một hệ thống có sự kiện, 2 thành phần CQRS có thể kết thúc với cùng một dữ liệu. Chúng tôi có thể bày tỏ sự phụ thuộc của cửa hàng để tránh giữ dữ liệu trùng lặp trong các cửa hàng không?

Ai đó có thể đưa ra một số trường hợp sử dụng cụ thể khi phụ thuộc cửa hàng là cần thiết và nơi mà vấn đề khó có thể được giải quyết theo bất kỳ cách nào khác? Tôi không thể tìm thấy bất kỳ bản thân mình.

Answer 1

Cuối cùng tôi đã xây dựng một ứng dụng có thứ gì đó giống như các cửa hàng Flux mà không có bất kỳ sự phụ thuộc nào.

Gần đây Dan Abramov đã tạo ra một khuôn khổ (Redux) làm nổi bật các cửa hàng thông composability, mà không cần bất kỳ phụ thuộc cửa hàng hoặc waitFor, và tôi chia sẻ hầu hết các ý tưởng của mình

Answer 2

Trong refluxjs chúng tôi giải quyết waitFor theo một vài cách, một cho luồng dữ liệu tuần tự và một cho luồng dữ liệu song song. Tôi cố gắng mô hình hóa các kho dữ liệu theo cách để tránh giữ cùng một dữ liệu (tức là dữ liệu bảo trì kép).

Về cơ bản, lưu trữ dữ liệu là các thành phần CQRS và tôi cố gắng tránh việc có 2 kho dữ liệu kết thúc với cùng một loại dữ liệu. Nếu tôi cần phải chuyển đổi dữ liệu bằng cách nào đó mà chỉ có một số thành phần cần, tôi phá vỡ nó ra một cửa hàng dữ liệu "tổng hợp". thực hiện ngây thơ:

var carsStore = Reflux.createStore({ 
    init: function() { 
     this.listenTo(Actions.updateCars, this.updateCallback); 
    }, 
    updateCallback: function() { 
     $.ajax('/api/cars', {}).done(function(data) { 
      this.trigger(data.cars); 
     }.bind(this)); 
    } 
}); 

Chúng ta có thể tạo ra một lưu trữ dữ liệu mà tổng hợp dữ liệu bằng cách lắng nghe những carsStore:

var modelsStore = Reflux.createStore({ 
    init: function() { 
     this.listenTo(carsStore, this.carsCallback); 
    }, 
    carsCallback: function(cars) { // passed on from carsStore trigger 
     this.trigger(this.getModels(cars)); // pass on the models 
    } 
    getModels: function(cars) { 
     return _.unique(_.map(cars, function(car) { return car.model; })); 
    } 
}); 

Bằng cách đó bạn Phản ứng xem các thành phần có thể sử dụng một trong để có được những chiếc xe và người kia để lấy các mô hình, được tổng hợp từ carStore.

Nếu cửa hàng cần phải đợi hai luồng dữ liệu song song để hoàn thành, chúng tôi cung cấp Reflux.all để tham gia các hành động và cửa hàng. Điều này hữu ích, ví dụ: nếu bạn đang đợi dữ liệu tải từ các tài nguyên REST khác nhau khác nhau.

var carsAndPartsAreLoaded = Reflux.all(carStore, partsStore); 

// you may now listen to carsAndPartsAreLoaded 
// from your data stores and components 

Hy vọng điều này có ý nghĩa với bạn.