Mobx + reactjsで@Actionを使用するには？

Question

私のコードで@actionを使う方法が混乱しています。

class Items { 

    @observable items= []; 

    @action addItem() { 
    let newItem= new Item(); 
    items.push(newItem); 
    } 
} 

@observer 
class ItemPage extends Component { 

    constructor() { 
    super(); 
    } 

    render() { 
    const {addItem} = this.props.store; 
    return (
     <div className="items"> 
     <input type="button" value="add" onClick={addItem}/> 
     </div> 
    ) 
    } 
} 

const store = new Items(); 

Answer 1

あなたがthis.itemsだけでなくitemsを変更することを確認します。またaction.boundのいずれかのアクションをバインドまたはコンポーネントにバインドされたハンドラを作成する必要があります。

class Items { 
    @observable items= []; 

    @action.bound 
    addItem() { 
    let newItem = new Item(); 
    this.items.push(newItem); 
    } 
} 

@observer 
class ItemPage extends Component { 
    render() { 
    const { addItem } = this.props.store; 
    return (
     <div className="items"> 
     <input type="button" value="add" onClick={addItem}/> 
     </div> 
    ); 
    } 
} 

const store = new Items(); 

または：

class Items { 
    @observable items= []; 

    @action 
    addItem() { 
    let newItem = new Item(); 
    this.items.push(newItem); 
    } 
} 

@observer 
class ItemPage extends Component { 
    handleClick =() => { 
    this.props.store.addItem(); 
    }; 
    render() { 
    return (
     <div className="items"> 
     <input type="button" value="add" onClick={this.handleClick}/> 
     </div> 
    ); 
    } 
} 

const store = new Items();