MobX Introduction

MobX Introduction

ReactNative Meetup #2

Edef96b75bcbf970c040b5d4e3f9a02b?s=128

Keita Moromizato

June 10, 2016
Tweet

Transcript

  1. .PC9 3FBDU/BUJWF.FFUVQ ,FJUB.PSPNJ[BUP!3FMBUJPOT*OD

  2. ࠓ೔ͷ͓࿩

  3. w ΋ΖΈ͟ͱ͚͍ͨ !LUB@NPSPNJJ  w 3FMBUJPOT*ODٕज़੹೚ऀ w ϏδωεܥΠϯλϏϡʔϝσΟΞʮ4&-&$,ʯ
 &OHJOFFS8SJUFS&EJUPS w

    3FBDUKT3FEVYOPEFKT"84ʜ w 3/࢖͍ͬͯΔϓϩδΣΫτ΋͋Γ·͢ʂ
  4. None
  5. None
  6. w γϯϓϧͳσʔλϑϩʔ ͱ͍͏͔TUBUFͷΈ  w ݴͬͯ͠·͑͹ͨͩͷ0CTFSWFSύλʔϯ w 3FBDU/BUJWFͰ΋ಈ͘ .PC9 ΋Ϳͬ͘͢

  7. 4BNQMF

  8. import mobx, { observable, computed } from 'mobx'; import {

    observer } from 'mobx-react/native'; class TodoStore { @observable todos = []; @computed get getCompletedCount() { return this.todos.filter(t => t.completed).length; } addTodo(task) { this.todos.push({ task: task, completed: false }); } } 4UPSF ϓϨʔϯͳΦϒδΣΫτ %FDPSBUPSͰ؂ࢹର৅Λࢦఆ 4UBUFΛॻ͖׵͑ΔΞΫγϣϯ HFUGVODUJPOʹ΋ରԠ
  9. @observer class TodoList extends Component { render() { const {

    store } = this.props; return ( <View>{தུ}</View> ) } } const store = new TodoStore(); class mobxSample extends Component { render() { return ( <View style={styles.container}> <TodoList store={ store } /> </View> ); } } $PNQPOFOU PCTFSWFSDPNQPOFOU 4UPSFΛ౉͢
  10. $PNQPOFOU %BUB#JOEJOH @observer class TodoList extends Component { render() {

    const { store } = this.props; return ( <View> <TextInput onChange= { this.onEdit } value={ this.state.text } /> <Text> { store.report } </Text> </View> ) } }
  11. onPress = () => { this.props.store.addTodo(this.state.text); } 4UPSFͷॻ͖͔͑ 4UPSFͷΞΫγϣϯΛ࣮ߦ 7JFX͔Β௚઀QSPQTΛॻ͖͔͑΋

    checkAll = () => { this.props.store.todos.forEach(t => t.completed = true); }
  12. class ObservableTodoStore { history = []; constructor() { mobx.autorun( ()

    => { this.history.push(this.todos.map(t => t)); console.log("autorun" + this.report) }); } } export default new ObservableTodoStore(); w TUBUFͷมߋ࣌ʹίʔϧόοΫ͕ݺ͹ΕΔ BVUPSVO ˞3/Ͱݺ͹Εͳ͔ͬͨ ͜͜ͰϩΪϯάͨ͠Γɺ TUBUFΛอଘͯ͠IJTUPSZ؅ཧ ҧ͍·ͨ͠ɻ4UPSF಺ͰBVUPSVOΛ࣮ߦͨ͠Βେৎ෉
 ɹɹ 4UPSF಺ͷ!PWTFSCBCMF͕มߋ͞ΕͨΒBVUPSVO͕࣮ߦ͞ΕΔɺ͕ਖ਼͍͠
  13. ·ͱΊతͳ w 3FBDUqVYܥ΍ͬͯΔਓ͸ؾʹͳΔॻ͖ํ
 
 
 3FBDUͷࢥ૝ QSPQTTFU4UBUFʜ ͸ɻɻɻʁ w 3FBDU/BUJWF֮͑Δ͜ͱଟ͍

    3FBDU'MVY3PVUFS ͱࢥͬͯΔਓ͸ख࢝Ίʹ৮ͬͯΈͯ΋ this.props.store.aa = “xxxx”;
  14. ͸·ͬͨϙΠϯτ w %FDPSBUPS͸3/σϑΥϧτͷ1PMJpMMʹؚ·Εͳ͍ w CBCFMSDʹASFBDUOBUJWFTUBHFAΛ௥Ճ \ QSFTFUT<SFBDUOBUJWF SFBDUOBUJWFTUBHFEFDPSBUPSTVQQPSU> ^

  15. ϦϙδτϦ w IUUQTHJUIVCDPN,FJUB.PSPNJ[BUPKTTUVEZ NPCYSFBDUOBUJWF w IUUQTHJUIVCDPN,FJUB.PSPNJ[BUPKTTUVEZ NPCY