2016-03-28 14 views
0

ダン・アブラモフのegghead.io Reduxコースでは、講義22のビデオでは、変更が反映されるようにFilterLinkコンポーネントが明示的に(forceUpdate経由で)コンポーネントすなわち、タイプのアクションがフィルタをクリックすると送出された後、現在のフィルタ(state.visibilityFilter)がクリックされたものに変更されます。講義からFilterLinkで更新を購読する必要はありません

私の理解では、私たちがsubscribeなかったとforceUpdateをすれば、フィルターのフォーマットは情報がFilterLinkに伝播されていなかったので、店を形成変更してから、上のLinkまでではないだろうということでした。私はFilterLinkコンポーネントにcomponentDidMountcomponentWillUnmountで行を削除する場合

ただし、アプリがうまく働い、情報がまだでも明示的にストアから更新を強制することなく伝播されていたようです。以下のコードから

class FilterLink extends Component { 



     componentDidMount() { 
     this.unsubscribe = store.subscribe(() => 
     this.forceUpdate() 
    ); 
    } 

    componentWillUnmount() { 
     this.unsubscribe(); 
    } 


    render() { 

     const { 
     filter, 
     children, 
     } = this.props; 
     const state = store.getState(); 
     return (
     <Link 
     active = {filter === state.visibilityFilter} 
     onClick = {() => store.dispatch({ 
      type: 'SET_VISIBILITY_FILTER', 
      filter: filter, 
     })} 


     > {children}</Link> 
    ) 
    } 

    } 

、我々は唯一のアクティブリンクが<span>を持っていることがわかり(すなわち下線いない)と非アクティブ・フィルタは、その下の下線で表示されます。

const Link = ({ 
    active, 
    children, 
    onClick, 
    }) => { 

if (active) { 
    return (
    <span> 
    {children} 
    </span> 
) 
} 
else return (
    <a href='#' onClick = { e => { 
     e.preventDefault(); 
     onClick() 
    } 
    } 

    >{children}</a> 
) 
} 

enter image description here enter image description here enter image description here

私の質問は:componentDidMount/componentWillUnmountラインを含むまたは除くかUIの成果が同一すなわちでした。クリックされたフィルタはスパンになり、下線は引かれず、他の2つは<a>になり、下線が引かれます。これは、明示的なサブスクリプションがなくても、店舗(この場合はstate.visibilityFilter)の情報が<Link>コンポーネントに正常に渡されたことを示しています。

FilterLinkコンポーネントのストアの購読とforceUpdateは、バックグラウンドで重要なアップデートを実現しますが、UIでは明らかではありませんか、この手順は純粋にオプションですか? UIに明らかでない更新があった場合、それは何ですか?

答えて

1

まだレンダリングする理由は、コードのこの時点でトップレベルのレンダリングがまだstore.subscribe(render);だったからです。ビデオの後半で、Danはこのトップレベルのレンダリングを削除し、クラスにライフサイクルのみを処理させます。コードの変更はhereです。

関連する問題