Add Sagas

App/Actions/ActionCreators.js

@@ -4,3 +4,4 @@ import types from './ActionTypes'
 const createAction = (type, params = null) => ({ type, ...params })
 
 export const initializeGame = (tileCount, maxRows, maxColumns) => createAction(types.INITIALIZE_GAME, { tileCount, maxRows, maxColumns })
+export const tileTaken = (row, column, owner, orientation) => createAction(types.TILE_TAKEN, { row, column, owner, orientation })

App/Actions/ActionTypes.js

@@ -1,3 +1,4 @@
 export default {
-  INITIALIZE_GAME: 'INITIALIZE_GAME'
+  INITIALIZE_GAME: 'INITIALIZE_GAME',
+  TILE_TAKEN: 'TILE_TAKEN'
 }

App/Components/GameTile.js

@@ -58,9 +58,11 @@ class GameTile extends Component {
   }
 
   handlePress () {
+    const {onTilePress, row, column, currentPlayer} = this.props
     if (this.canPress()) {
       this.updateOrientation()
       this.updateOwner()
+      onTilePress(row, column, currentPlayer, this.state.orientation)
     }
   }
 
@@ -145,7 +147,8 @@ GameTile.propTypes = {
   row: PropTypes.number,
   column: PropTypes.number,
   currentPlayer: PropTypes.string,
-  gameInProgress: PropTypes.bool
+  gameInProgress: PropTypes.bool,
+  onTilePress: PropTypes.func
 }
 
 export default GameTile

App/Containers/GameBoard.js

@@ -18,10 +18,17 @@ class GameBoard extends Component {
     this.tileCount = 0
     this.maxColumns = 0
     this.maxRows = 0
+    this.handleTilePress = this.handleTilePress.bind(this)
   }
 
   componentDidMount () {
-    this.props.dispatch(actions.initializeGame(this.tileCount, this.maxRows, this.maxColumns))
+    const {dispatch} = this.props
+    dispatch(actions.initializeGame(this.tileCount, this.maxRows, this.maxColumns))
+  }
+
+  handleTilePress (row, column, owner, orientation) {
+    const {dispatch} = this.props
+    dispatch(actions.tileTaken(row, column, owner, orientation))
   }
 
   renderColumn (row) {
@@ -31,7 +38,15 @@ class GameBoard extends Component {
     this.maxColumns = maxColumns
     for (let col = 0; col < maxColumns; col++) {
       let id = `row_${row}_col_${col}`
-      let element = <GameTile key={id} ref={id} row={row} column={col} currentPlayer={currentPlayer} gameInProgress={gameInProgress} />
+      let element = <GameTile
+                      key={id}
+                      ref={id}
+                      row={row}
+                      column={col}
+                      currentPlayer={currentPlayer}
+                      gameInProgress={gameInProgress}
+                      onTilePress={this.handleTilePress}
+                    />
       tiles.push(element)
       this.tileCount++
     }

App/Root.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import GameScreen from './Components/GameScreen'
 import { Provider } from 'react-redux'
 import configureStore from './Store/ConfigureStore'
@@ -11,6 +9,11 @@ import React, {
 } from 'react-native'
 
 export default class Root extends Component {
+  constructor (props) {
+    super(props)
+    console.disableYellowBox = false
+  }
+
   render () {
     return (
       <Provider store={store}>

App/Sagas/Gameboard.js

@@ -0,0 +1,12 @@
+import { put, take } from 'redux-saga/effects'
+import Types from '../Actions/ActionTypes'
+import Actions from '../Actions/ActionCreators'
+
+export function * watchTilePress () {
+  while (true) {
+    const {row, column, owner, orientation} = yield take(Types.TILE_TAKEN)
+    console.log('************* saga invoked!!!')
+    console.log({row, column, owner, orientation})
+
+  }
+}

App/Sagas/index.js

@@ -0,0 +1,5 @@
+import { watchTilePress } from './Gameboard'
+
+export default [
+  watchTilePress
+]

App/Store/ConfigureStore.js

@@ -1,8 +1,12 @@
 import { createStore, applyMiddleware } from 'redux'
 import RootReducer from '../Reducers/'
-import createLogger from 'redux-logger'
 import R from 'ramda'
 
+// middleware that injects into the store chain
+import createLogger from 'redux-logger'
+import sagaMiddleWare from 'redux-saga'
+import sagas from '../Sagas'
+
 const LOGGING_BLACKLIST = ['EFFECT_RESOLVED', 'EFFECT_TRIGGERED', 'EFFECT_REJECTED']
 
 // the master switch to turn off logging
@@ -21,6 +25,7 @@ const logger = createLogger({
 // NOTE:  it's important that logger is last apparently.
 // https://github.com/fcomb/redux-logger/issues/20
 const finalCreateStore = applyMiddleware(
+  sagaMiddleWare(...sagas),
   logger
 )(createStore)
 

package.json

@@ -22,6 +22,7 @@
     "react-redux": "^4.4.0",
     "redux": "^3.3.1",
     "redux-logger": "^2.5.2",
+    "redux-saga": "^0.9.1",
     "seamless-immutable": "^5.0.1"
   },
   "devDependencies": {