## 八、View （第二部分）
現在，我們再回過頭來修改?[View](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/components/MyButtonController.jsx)?，讓它監聽 Store 的?`change`?事件。
> ~~~
> // components/MyButtonController.jsx
> var React = require('react');
> var ListStore = require('../stores/ListStore');
> var ButtonActions = require('../actions/ButtonActions');
> var MyButton = require('./MyButton');
>
> var MyButtonController = React.createClass({
> getInitialState: function () {
> return {
> items: ListStore.getAll()
> };
> },
>
> componentDidMount: function() {
> ListStore.addChangeListener(this._onChange);
> },
>
> componentWillUnmount: function() {
> ListStore.removeChangeListener(this._onChange);
> },
>
> _onChange: function () {
> this.setState({
> items: ListStore.getAll()
> });
> },
>
> createNewItem: function (event) {
> ButtonActions.addNewItem('new item');
> },
>
> render: function() {
> return <MyButton
> items={this.state.items}
> onClick={this.createNewItem}
> />;
> }
> });
> ~~~
上面代碼中，你可以看到當`MyButtonController`?發現 Store 發出?`change`?事件，就會調用?`this._onChange`?更新組件狀態，從而觸發重新渲染。
> ~~~
> // components/MyButton.jsx
> var React = require('react');
>
> var MyButton = function(props) {
> var items = props.items;
> var itemHtml = items.map(function (listItem, i) {
> return <li key={i}>{listItem}</li>;
> });
>
> return <div>
> <ul>{itemHtml}</ul>
> <button onClick={props.onClick}>New Item</button>
> </div>;
> };
>
> module.exports = MyButton;
> ~~~
