3

I'm playing with React for the first time and I think I really like it. I've implemented (large parts of) the board game Go with it and so far, but I've run into something strange that I don't know how to approach in the idiomatic React way. Basically, I've got a model--the board game--implemented as its own class Board. It exposes only it's constructor, and methods play(i,j) and pass. It handles all of the game logic and updates its own internal state appropriately. It has no reference to anything related to a view/component. I've got a React Component called BoardView which maintains a reference to an instance of a Board. I've also got a Component called AlertView that displays messages about the game state (illegal moves and such) when appropriate.

Everything works well now, and I like the separation of concerns between the Board class and its views. However, the way I have my Board class communicate its changes to the views is unusual, and I feel that it is inconsistent with other React code. Basically, I abuse jQuery's event system to allow me to trigger arbitrary events like ["update", "atari", "suicide"]. In this scheme, the Component has an onClick listener that calls Board.play, which triggers 0 to many events on the Board instance. The Component listens for an "update" event, and calls this.setState, which will force it to re-render(), putting the view into a state that correctly depicts the game. The AlertView listens for the "atari" and "suicide" events on the same board instance and similarly calls this.setState, which triggers another render().

Should I cut out the jQuery events? If so, what's the best way of doing this?

All code is available here and you can play with the app here.

Edit: For posterity's sake, this question was asked at commit 3f600c.

2 Answers 2

2

I'm not sure if this is idiomatic React, but from the React tutorial, the onSubmit handler is passed from the parent to the children as a props.

In your case that would mean to pass the onPlay handler from BoardView to BoardIntersection like this:

var BoardView = React.createClass({
  getInitialState: function() {
    return {"board": this.props.board}
  },
  playHandler: function(i, j) {
    this.props.board.play(i, j)
  },
  render: function() {
    ...
    intersections.push(BoardIntersection({
      color: this.state.board.board[i][j],
      row: i,
      col: j,
      onPlay: this.playHandler
    }));
    ...
  }
})

and BoardIntersection will call onPlay as needed:

var BoardIntersection = React.createClass({
  handleClick: function() {
    this.props.onPlay(this.props.row, this.props.col);
  },
})
2
  • Thanks for answering! This seems like a good way to handle message passing from the Component to the Board, and I think I might do this to avoid all of the event delegations, but what I'm really looking for is how to handle messages from the Board (modal) to the Component. For instance, how should I communicate that after a successful move, you've endangered your opponent (atari)?
    – cjlarose
    Dec 31, 2013 at 18:56
  • 1
    I see, for that case how about just have a field/method on Board that indicate the current alert, instead of trigger the event you just set the field's value, and the AlertView display that. IMO data/application state stays on the model, exposed to component via props; component's state is specific to that component (toggle state for example).
    – tungd
    Jan 1, 2014 at 3:05
2

tungd's comments pointed me in the right direction, but I decided to answer my own question for a more complete answer.

I ended up removing all of the custom events being fired on the model. I found the following snippet from the React docs to be especially helpful:

A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.

Instead of firing events like "atari" and "suicide" on the model, I just set boolean properties on the model in_atari and attempted_suicide. Now, only one "parent" Component in my application has state. It renders all sub-components via declarative props. The AlertView is one such sub-component whose render method now checks the new boolean flags to render the appropriate text. The main parent Component passes a handler to its sub-components that updates the component state (and subsequently forces a re-render).

In the relevant commit, I've named the parent component ContainerView.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.