import React from 'react';
import boardImage from "../images/shogi_board/ban_kaya_d.png";
import Piece from './piece';
import Shogi from '../src/shogi';
import store from '../stores/index';

export default class Board extends React.Component {
  render() {
    var tbody = store.getState().board.map((row, y) => {
      var rows = row.map((piece, x) => {
        return(
          <td key={x}>
            <Piece piece={piece} onClick={() => { store.dispatch({type: 'HOLD_PIECE', x: x, y: y }); }}/>
          </td>
        );
      });
      return(<tr key={y}>{rows}</tr>);
    });

    return(
      <div>
        <table className="board" background={boardImage}>
          <tbody>{tbody}</tbody>
        </table>
      </div>
    );
  }
}

@@ -123,70 +123,311 @@
 ort 
-Shogi from '../src/shogi';%0Aimport store from '../stores/index'
+%7B connect %7D from 'react-redux';%0Aimport %7B holdPiece %7D from '../actions';%0A%0Aconst mapStateToProps = (state) =%3E %7B%0A  return %7B board: state.board %7D;%0A%7D;%0A%0Aconst mapDispatchToProps = (dispatch) =%3E %7B%0A  return (%0A    %7B%0A      onBoardClick: (piece) =%3E %7B%0A        return dispatch(holdPiece(piece));%0A      %7D%0A    %7D%0A  );%0A%7D
 ;%0A%0Ae
@@ -446,16 +446,21 @@
 t class 
+Shogi
 Board ex
@@ -516,24 +516,18 @@
 y = 
-store.getState()
+this.props
 .boa
@@ -673,68 +673,33 @@
 ck=%7B
-() =%3E %7B store.dispatch(%7Btype: 'HOLD_PIECE', x: x, y: y %7D); %7D
+this.props.onBoardClick()
 %7D/%3E%0A

Use `mapStateToProps`, `mapDispatchToProps`