mobx - 상점에서 로직보기

Question

mobx + 반응에 많은 응용 프로그램이있어 많은 구성 요소가 상점에서 동일한 작업을 호출합니다. 예를 들어 "사진 삭제"는 사진 목록이나 모달에서 호출 할 수 있습니다. 그러나 예를 들어 확인 모달을 표시하는 작업을 실행하기 전에 ...

이 해결 방법이 최종적으로 끝나지 만보기 논리와 데이터 로그인을 혼합하는 것처럼 보입니다 ...

class PhotoStore { 
    @observable photos; 

    @action destroy(photo) { 
    if (currentUser.isGuest) { 
     modalStore.open('NoGuest') 
     return 
    } 

    modalStore.openConfirm(() => { 
     // some datalogic 
     api.delete('/photos/'+photo.id).then(() => { 
     notificationStore.showSuccess('your photo was deleted!') 
     }) 
    }) 
    } 
} 


const PhotoView = observer(({photo}) => { 
    return <div onClick={() => photoStore.destroy(photo)}>...</div> 
}) 

너 뭐니? 괜찮은거야?

감사합니다.

Answer 1

모델 논리가있는 UI 논리를 피하려면 코드를 다음과 같이 단순화 할 수 있습니다.

class PhotoView extends React.Component { 
    handleDelete() { 
    if (this.props.currentUser.isGuest) { 
     modalStore.open('NoGuest'); 
     return; 
    } 

    modalStore.openConfirm(() => { 
     // some datalogic 
     photoStore.delete(this.props.photo).then(() => { 
     notificationStore.showSuccess('your photo was deleted!'); 
     }); 
    }); 
    } 

    render() { 
    return <div onClick={this.handleDelete.bind(this)}>...</div> 
    } 
} 

PhotoStore의 삭제 기능을 수정해야합니다

@action delete(photo) { 
    return new Promise((res, rej) => { 
    api.delete('/photos/'+photo.id) 
     .then(res) 
     .catch(rej); 
    }); 
} 

Answer 2

대신

notificationStore.showSuccess ('사진이 삭제!)

이

당신이를 추가 할 수 있습니다 관찰하고 저장할 수 있습니다. 귀하의 모달 코드는 다른 곳에서 살고 관찰자가 될 수 있습니다