reactjs

Fluxxor에는 API와의 비동기 통신 예제 가 있습니다.

이 블로그 게시물 에 대해 이야기하고 React의 블로그에 실 렸습니다.

백엔드와의 프론트 엔드 소프트웨어 동기화가 여전히 고통스럽기 때문에 아직 명확하게 답변되지 않은 매우 중요하고 어려운 질문입니다.

JSX 컴포넌트에서 API 요청을해야합니까? 백화점? 다른 장소?

상점에서 요청을 수행한다는 것은 주어진 조치에 대해 2 개의 상점이 동일한 데이터를 필요로하는 경우 2 개의 유사한 요청을 발행한다는 것을 의미합니다 (상점 사이에 종속성을 도입하지 않는 한 실제로는 마음에 들지 않습니다 )

제 경우에는 Q 약속을 행동의 페이로드로 넣는 것이 매우 편리하다는 것을 알았습니다.

• 내 작업은 직렬화 할 필요가 없습니다 (이벤트 로그를 보관하지 않고 이벤트 소싱의 이벤트 재생 기능이 필요하지 않습니다)
• 다른 조치 / 이벤트 (요청 발생 / 요청 완료 / 요청 실패)가 없어야하며 동시 요청이 발생 될 수있을 때 상관 ID를 사용하여 일치해야합니다.
• 여러 상점이 상점간에 종속성을 유발하지 않고 동일한 요청의 완료를 청취 할 수 있습니다 (그러나 캐싱 계층을 도입하는 것이 더 나을 수 있습니까?).

Ajax는 EVIL입니다

나는 Ajax가 추론하기가 매우 어렵 기 때문에 가까운 미래에 점점 더 적게 사용될 것이라고 생각합니다. 옳은 길? 분산 시스템의 일부로 장치를 고려할 때이 아이디어를 처음 발견 한 곳을 알지 못합니다 (이 영감을주는 Chris Granger 비디오에서 ).

생각 해봐 이제 확장 성을 위해 스토리지 엔진으로서 최종 일관성을 갖춘 분산 시스템을 사용합니다 ( CAP 정리를 이길 수없고 종종 사용 가능하기를 원하기 때문에). 이러한 시스템은 서로의 폴링을 통해 동기화되지 않고 (합의 작업 제외) 분산 시스템의 모든 구성원을 일관되게 만들기 위해 CRDT 및 이벤트 로그와 같은 구조를 사용합니다 (구성원은 충분한 시간이 주어지면 동일한 데이터로 수렴됩니다) .

이제 모바일 장치 나 브라우저가 무엇인지 생각해보십시오. 네트워크 대기 시간 및 네트워크 파티셔닝이 발생할 수있는 분산 시스템의 구성원 일뿐입니다. (즉, 지하철에서 스마트 폰을 사용하고 있습니다)

네트워크 파티션 및 네트워크 속도 허용 데이터베이스를 구축 할 수 있다면 (여전히 고립 된 노드에 대한 쓰기 작업을 수행 할 수 있음) 이러한 개념에서 영감을 얻은 프런트 엔드 소프트웨어 (모바일 또는 데스크탑)를 구축 할 수 있습니다. 응용 프로그램 기능을 사용할 수없는 상자의.

데이터베이스가 프론트 엔드 응용 프로그램을 아키텍처 화하는 방법에 대해 영감을 얻어야합니다. 주목할 점은 이러한 앱이 서로에게 데이터를 전송하기 위해 POST 및 PUT 및 GET ajax 요청을 수행하지 않고 이벤트 로그 및 CRDT를 사용하여 최종 일관성을 유지한다는 것입니다.

왜 프론트 엔드에서 그렇게하지 않습니까? 백엔드가 이미 그 방향으로 움직이고 있으며 Kafka와 같은 도구는 큰 플레이어가 대규모로 채택하고 있습니다. 이것은 어떻게 든 이벤트 소싱 / CQRS / DDD와 관련이 있습니다.

Kafka 작가의 멋진 기사를 확인하여 자신을 확신 시키십시오.

• 스트림 처리, 이벤트 소싱, 반응 형, CEP 및 IT의 모든 감각
• 로그 : 모든 소프트웨어 엔지니어가 실시간 데이터의 통합 추상화에 대해 알아야 할 사항 .

어쩌면 Ajax 요청을 발생시키는 대신 서버에 명령을 보내고 서버 이벤트 스트림 (예 : 웹 소켓을 통해)을 수신하는 것으로 시작할 수 있습니다.

나는 Ajax 요청에 결코 익숙하지 않았다. 우리가 반응함에 따라 개발자는 기능적인 프로그래머 인 경향이 있습니다. 프론트 엔드 애플리케이션의 “진리 소스”인 로컬 데이터에 대해 추론하기는 어렵다고 생각하지만 실제 진실 소스는 실제로 서버 데이터베이스에 있으며 “로컬”진실 소스는 이미 구식 일 수 있습니다. 당신이 그것을받을 때, 당신이 절름발이 새로 고침 버튼을 누르지 않으면 진정한 진실 가치의 근원으로 수렴하지 않을 것입니다 …이 엔지니어링입니까?

그러나 몇 가지 명백한 이유로 이러한 것을 디자인하는 것은 여전히 ​​어렵습니다.

• 모바일 / 브라우저 클라이언트는 리소스가 제한되어 있으며 모든 데이터를 로컬에 저장할 필요는 없습니다.
• 클라이언트는 분산 시스템의 모든 데이터를 볼 수 없으므로 보안상의 이유로 수신되는 이벤트를 필터링해야합니다.

답변

var ProductClient = {

  load: function(success, failure) {
    setTimeout(function() {
      var ITEMS = require('../data/product-data.js');
      success(ITEMS);
    }, 1000);
  }
};

module.exports = ProductClient;

var Fluxxor = require("fluxxor");

var store = Fluxxor.createStore({

  initialize: function(options) {

    this.productItems = [];

    this.bindActions(
      constants.LOAD_PRODUCTS_SUCCESS, this.onLoadSuccess,
      constants.LOAD_PRODUCTS_FAIL, this.onLoadFail
    );
  },

  onLoadSuccess: function(data) {
    for(var i = 0; i < data.products.length; i++){
      this.productItems.push(data.products[i]);
    }
    this.emit("change");
  },

  onLoadFail: function(error) {
    console.log(error);
    this.emit("change");
  },

  getState: function() {
    return {
      productItems: this.productItems
    };
  }
});

module.exports = store;

var ProductClient = require("../fake-clients/product-client");

var actions = {

  loadProducts: function() {

    ProductClient.load(function(products) {
      this.dispatch(constants.LOAD_PRODUCTS_SUCCESS, {products: products});
    }.bind(this), function(error) {
      this.dispatch(constants.LOAD_PRODUCTS_FAIL, {error: error});
    }.bind(this));
  }

};

module.exports = actions;

class DataStore {
  constructor() {
    this.data = [];

    this.bindListeners({
      handleDataNeeded: Action.DATA_NEEDED,
      handleNewData: Action.NEW_DATA
    });
  }

  handleDataNeeded(id) {
    if(neededDataNotThereYet){
      api.data.fetch(id, (err, res) => {
        //Code
        if(success){
          Action.newData(payLoad);
        }
      }
    }
  }

  handleNewData(data) {
    //code that saves data and emit change
  }
}