[問題] react component 如何使用"外部"的值

[keev (a)]

我在寫一個遊戲

希望game logic 和 view 能夠儘量分開

也就是說 game 獨立出一個物件

var game = new Game()
...
game.getCash()
game.nextMonth()

即使沒有實做畫面也可以正常運行


但另一方面

react 把變數放在 state 或 prop

無法用「外面的」變數去改變 state或prop

有種encapsulation 的感覺

那要如何把遊戲邏輯獨立出來 但又同時使用 react呢？

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.141.166.216
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1487767724.A.7A7.html
推 async: 用redux?
推 mrbigmouth: 如果你的game物件不包含任何資料(資料放store裡)
→ mrbigmouth: 只是用來呼叫方法的物件  可以把game放在根container
→ mrbigmouth: 的context裡面  需要的子view再用context取得game來
→ mrbigmouth: 呼叫方法
→ mrbigmouth: https://facebook.github.io/react/docs/context.html
推 mrbigmouth: 如果game物件包含資料  就只能把game做成可被訂閱的
→ mrbigmouth: store了
redux 和context 看過一遍了
但大概要再看十遍才會看懂

現在找到一個方法 從todomvc react 看到的
看到時晴天霹靂
因為他的方法是每次model改變時去呼叫
ReactDOM.render(<App model={model} />, reactRoot)
難道這種方式才是 the react way ?

// Game.js
class Game(){
  constructor(){
    game.render = function(){}
  }

  subscribe(render){
    this.render = render
  }

  addCash(){
    ...
    this.render()
  }

}


// App.js
class App extends React.Component{
  ...
}

var game = new Game()

function render() {
  ReactDOM.render(
    <App model={game}/>,
    document.getElementsById('game-root')
  );
}

game.subscribe(render)
render()
※ 編輯: keev (111.251.139.238), 02/23/2017 15:05:55