ダン・アブラモフのegghead.io Reduxコースでは、講義22のビデオでは、変更が反映されるようにFilterLink
コンポーネントが明示的に(forceUpdate
経由で)コンポーネントすなわち、タイプのアクションがフィルタをクリックすると送出された後、現在のフィルタ(state.visibilityFilter
)がクリックされたものに変更されます。講義からFilterLinkで更新を購読する必要はありません
私の理解では、私たちがsubscribe
なかったとforceUpdate
をすれば、フィルターのフォーマットは情報がFilterLink
に伝播されていなかったので、店を形成変更してから、上のLink
までではないだろうということでした。私はFilterLink
コンポーネントにcomponentDidMount
とcomponentWillUnmount
で行を削除する場合
ただし、アプリがうまく働い、情報がまだでも明示的にストアから更新を強制することなく伝播されていたようです。以下のコードから
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>
)
}
私の質問は:componentDidMount
/componentWillUnmount
ラインを含むまたは除くかUIの成果が同一すなわちでした。クリックされたフィルタはスパンになり、下線は引かれず、他の2つは<a>
になり、下線が引かれます。これは、明示的なサブスクリプションがなくても、店舗(この場合はstate.visibilityFilter
)の情報が<Link>
コンポーネントに正常に渡されたことを示しています。
FilterLink
コンポーネントのストアの購読とforceUpdateは、バックグラウンドで重要なアップデートを実現しますが、UIでは明らかではありませんか、この手順は純粋にオプションですか? UIに明らかでない更新があった場合、それは何ですか?