상태를 관리하는 방법은 무엇입니까?

Question

class Book { 
    constructor() { 
     this.state = { 'isInitializing': true, 'isFlipping': false, 'isZooming': false, 'isPeeled': false, 'isZoomed': false, 'isFlippable': false } 
     this.mode = _viewer.getMatch('(orientation: landscape)') ? 'landscape' : 'portrait' 
     this.plotter = { 'origin': JSON.parse(`{ "x": "${parseInt(d.getElementsByTagName('body')[0].getBoundingClientRect().width)/2}", "y": "${parseInt(d.getElementsByTagName('body')[0].getBoundingClientRect().height)/2}" }`) } 
    } 
    ... 

많은 주와 함께 Book 클래스가 있습니다. 이 책은 CSS3 애니메이션을 사용하여 페이지를 넘기거나 확대/축소 등으로 집계되어 상태가 isFlipping: false에서 isFlipping: true, isZoomed: false에서 isZoomed: true으로 변경됩니다.

isZoomed: trueisFlippable이 false 일 때와 같이 상호 배타적 인 상황이 있습니다.

그리고 이벤트 리스너와

:

이후 상태에 따라에 다음

const delegateElement = d.getElementById('plotter') 

    const handler = (event) => { 
    event.stopPropagation() 
    event.preventDefault() 

    switch (event.type) { 
     case 'mouseover': 
     _handleMouseOver(event) 
     break 
     case 'mouseout': 
     _handleMouseOut(event) 
     break 
     case 'mousemove': 
     _handleMouseMove(event) 
     break 
     case 'mousedown': 
     _handleMouseDown(event) 
     break 
     case 'mouseup': 
     _handleMouseUp(event) 
     break 
     case 'click': 
     _handleMouseClicks(event) 
     break 
     case 'dblclick': 
     _handleMouseDoubleClick(event) 
     break 

그리고 : 물건을한다.

const _handleMouseOver = (event) => { 
    if (!event.target) return 
    // do stuff depending on state, meaning lot of `if else` or `switch` `case ` statements. 

    }  
    const _handleMouseOut = (event) => { 
    if (!event.target) return 
    // do more stuff. 
    } 

    const _handleMouseMove = (event) => { 
    if (!event.target) return 
    // do stuff depending on state. 
    } 
    … 
    // more events as per list above… and so on. 

이제 내 코드를 매우 다루기 힘들고 끔찍한 것으로 만들 것입니다. :-(

나는 그들이 해고 및 애니메이션 (transitionend 등) 완료로 나는 로직 (패턴)을 구성하고 이벤트마다 책의 상태를 처리하기 위해 취해야하는 경로 궁금합니다.

Answer 1

가장 좋은 방법으로 내가 JS 상태를 관리 알고 것은 Mobx 또는 Redux 같은 상태 관리 라이브러리를 사용하는 것입니다

는 플럭스의 일반적인 패턴과 그 구현을 살펴보십시오