반응으로 글로벌 이벤트 방출 및 처리

Question

나는 "장바구니에 추가 버튼"을 만들기 위해 약간의 반응을 보이고 있습니다. 여기 내 코드가있다.

var ProductPurchase = React.createClass({ 
    handleSubmit: function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: "/cart/add.js", 
     method: "post", 
     dataType: "json", 
     data: { 
     "id": this.props.variantId, 
     "quantity": this.props.quantity, 
     }, 
     success: function(data) { 
     // emit cart added event 
     }.bind(this), 
     error: function(xhr, status, err) { 
     // emit error event (cart added) 
     }.bind(this) 
    }); 
    }, 
    getDefaultProps: function(){ 
    return { 
     quantity: 1, 
     variantId: 231634908, 
     buttonText: "Add to cart" 
    } 
    }, 
    render: function() { 
    return (
     <div className="productPurchase"> 
     <form action="/cart/add" method="post" enctype="multipart/form-data" onSubmit={this.handleSubmit}> 
      <input type="hidden" name="quantity" value={ this.props.quantity } /> 
      <input type="hidden" name="id" value={ this.props.variantId } /> 
      <button type="submit">{this.props.buttonText}</button> 
     </form> 
     </div> 
    ); 
    } 
}); 

궁금한 점은이 ajax 처리기입니다. 나는이 이벤트들을 어디로 이끌어야할지 모르겠다는 점을 제외하고는 반응의 요점이 구성 요소 간의 상호 운용성이라는 것을 확신한다. 성공하면 카트 카운트 표시기와 같은 몇 가지 구성 요소를 상상할 수 있습니다. 실패한 경우 오류 경고가 표시되지만이를 정확히 파악하지 못합니다. 이게 flux's dispatchers의 요점입니까?

Answer 1

예, 확실히 Flux의 운영자 또는 사용하고 싶은 이벤트 이미 터의 요점입니다.당신이 비록 그 길 아래로 가기 전에, 그냥 플럭스 또는 사용자 정의 이벤트 이미 터를 사용하지 않고 소품 등의 이벤트 핸들러를 전달하는 것은 매우 간단

- 다만 당신이하고자 onSubmit, onClick 등 정상 DOM 요소에 대한 핸들러. 그런 다음 학부모에게 주정부를 설정하고 잠재적으로 다른 어린이들과 소통하도록하십시오 (소품을 통해). 다음 ProductPurchase 구성 요소의 관련 부분이 될 것

var RootComponent = React.createClass({ 
    handleCartAdded: function(cart) { 
    console.log('Got a new cart: ' + cart); 
    } 
    handleError: function(err) { 
    console.error(err) 
    } 
    render: function() { 
    return (
     <ProductPurchase onCartAdded={this.handleCartAdded} onError={this.handleError} /> 
    ) 
    } 
}) 

과 :

그래서이 경우, 이벤트를 다루는 부모 구성 요소를 상상

success: function(data) { 
    this.props.onCartAdded(data) 
    }.bind(this), 
    error: function(xhr, status, err) { 
    this.props.onError(err) 
    }.bind(this) 

더 복잡한 예를 것 결과를 다른 하위 구성 요소로 전달해야하지만 다시 부모에게 맡겨서 다음을 관리하십시오.

var RootComponent = React.createClass({ 
    handleCartAdded: function(cart) { 
    this.setState({cart: cart}) 
    } 
    handleError: function(err) { 
    console.error(err) 
    } 
    render: function() { 
    return (
     <div> 
     <ProductPurchase onCartAdded={this.handleCartAdded} onError={this.handleError} /> 
     <CartSummary cart={this.state.cart} /> 
     </div> 
    ) 
    } 
}) 

이렇게하면 구성 요소가 서로 분리되며 데이터/함수는 명확한 계약 (소품)으로 만 전달 될 수 있습니다.

이 간단한 이벤트 처리 스타일은 훨씬 더 명확하고 디버깅하기 쉽습니다. 그래서 앱이 실제로 복잡해지고/있거나 모든 구성 요소가 필요한 경우 Flux 스타일 아키텍처에만 의존합니다. 복잡한 방식으로 서로 통신한다.

Answer 2

플럭스는 프로그래밍 구성 (AJAX 호출 포함)을 분리하는 데 사용됩니다. 여기

은 항상 글로벌 범위에 남아있는 플럭스 아키텍처에서 Flux Docs

디스패처의도이다. 따라서 디스패처와 관련된 모든 작업은 항상 전역 범위에서 발생합니다. 또한 디스패처와 이벤트 시스템에는 약간의 차이가 있습니다. 이벤트 시스템은 항상 특정 이벤트에 바인딩 된 콜백을 등록하지만 디스패처의 경우 모든 콜백은 모든 이벤트에 바인딩됩니다.

Dispatcher 사용 방법은 무엇입니까? 응용 프로그램의 다른 부분이 AJAX 호출에 의해 영향을받는 경우 (저장 및 ActionCreators를 사용하지 않고 단순화 된 접근 방식)

1. 당신은 오히려 AJAX가에 전화를 이동,이 구성 요소에서이 AJAX 호출을해서는 안 새 파일 및 기능. 예, 성공 AJAX 응답에 플럭스의 Dispatcher class addToCart와에서

   var appDispatcher = new Dispatcher(); 
   

2. () 함수를 사용하여 (응용 프로그램 전체에서 공통)은 AppDispatcher를 작성, AppDispatcher를 사용하여 이벤트를

   // CartApiUtils.js 
   module.exports = { 
       addToCart: function(item){ 
        // AJAX call 
       } 
   } 
   

3. 을 CommonJS를 파견하여 :

   이 이벤트를 사용하여 원하는 목적지 앱에서

   appDispatcher.dispatch({ 
       actionType: 'cart.newItemAdded', 
       data: dataFromAjax 
   }); 
   

4. , 당신은 단지 등록 할 수 있습니다 디스패처 기능.

   는

   appDispatcher.register(function(payload){ 
       if(payload.actionType === 'cart.newItemAdded'){ 
        // payload.data contains the data 
       } 
   }); 
   

이 단순화 된 접근 방식입니다. 좀 더 표준화 된 구조와 더 큰 앱에서는 Stores (MVC의 Model 레이어와 유사하지만 동일하지는 않음)와 ActionCreator를 사용해야합니다. 여기서 View 레이어의 모든 상호 작용은 사용자가 수행 한 액션이며 AJAX 호출에 의한 응답입니다. 또한 서버에서 작업이됩니다.

Thumb 규칙은 상점에서 채우기 (또는 갱신)해야하며 상점은 Dispatcher 이벤트에서 갱신되어야합니다.

Answer 3

npm의 "react-global-events"을 사용하면 어떨까요?

https://www.npmjs.com/package/react-global-events