Flux/React 디자인 패턴

Question

갤러리에 이미지를 표시 할 작은 Flux/React 앱을 쓰고 있습니다. 30 초마다 웹 서비스에서 새 이미지를 가져 와서 저장소의 목록에 추가 한 다음, 뷰가 새 사진을 렌더링 할 수 있도록 변경 사항을 내 보냅니다 Flux 저장소에 타이머가 있습니다.

나는 그 모든 작업을하고 있지만 이제는 추가 된 최신 이미지에 특정 CSS를 추가하는 방법을 알고 싶습니다. 그러나 가장 좋은 방법은 무엇인지 알려주지는 못합니다. 상점에서보기가 정말 까다 롭지 않고 ...

Answer 1

상점에서 업데이트 메시지를 보낼 때 변경 사항을 추적 할 수 있습니다.

store.addChangeEventListener((images) => { 
    var last = this.state.newImageUrls || {}; 
    var now = {}; 

    images.forEach(function(img){ 
    if(!last[img.src]) now[img.src] = true; 
    }); 

    this.setState({newImageUrls: now, images: images}); 
}); 

와의

은 주어진 이미지 SRC가 새로운 경우 확인 렌더링 :

var newImages = this.state.newImageUrls; 
... 
images.map(function(x, i){ 
    return <img src={x.src} className={newImages[x.src] ? "new" : ""} /> 
});