From bd578d97eb941f24c060133c885106c411112fad Mon Sep 17 00:00:00 2001 From: derekgreenberg Date: Thu, 25 Feb 2016 16:00:59 -0800 Subject: [PATCH] Add Sagas --- App/Actions/ActionCreators.js | 1 + App/Actions/ActionTypes.js | 3 ++- App/Components/GameTile.js | 5 ++++- App/Containers/GameBoard.js | 19 +++++++++++++++++-- App/Root.js | 7 +++++-- App/Sagas/Gameboard.js | 12 ++++++++++++ App/Sagas/index.js | 5 +++++ App/Store/ConfigureStore.js | 7 ++++++- package.json | 1 + 9 files changed, 53 insertions(+), 7 deletions(-) create mode 100644 App/Sagas/Gameboard.js create mode 100644 App/Sagas/index.js diff --git a/App/Actions/ActionCreators.js b/App/Actions/ActionCreators.js index eebd231..1bc6c7b 100644 --- a/App/Actions/ActionCreators.js +++ b/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 }) diff --git a/App/Actions/ActionTypes.js b/App/Actions/ActionTypes.js index 0547d70..199070f 100644 --- a/App/Actions/ActionTypes.js +++ b/App/Actions/ActionTypes.js @@ -1,3 +1,4 @@ export default { - INITIALIZE_GAME: 'INITIALIZE_GAME' + INITIALIZE_GAME: 'INITIALIZE_GAME', + TILE_TAKEN: 'TILE_TAKEN' } diff --git a/App/Components/GameTile.js b/App/Components/GameTile.js index 915b4e7..bf7bf7e 100644 --- a/App/Components/GameTile.js +++ b/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 diff --git a/App/Containers/GameBoard.js b/App/Containers/GameBoard.js index 8af0e45..ef68c7f 100644 --- a/App/Containers/GameBoard.js +++ b/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 = + let element = tiles.push(element) this.tileCount++ } diff --git a/App/Root.js b/App/Root.js index a0930f2..35fb7af 100644 --- a/App/Root.js +++ b/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 ( diff --git a/App/Sagas/Gameboard.js b/App/Sagas/Gameboard.js new file mode 100644 index 0000000..e138167 --- /dev/null +++ b/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}) + + } +} \ No newline at end of file diff --git a/App/Sagas/index.js b/App/Sagas/index.js new file mode 100644 index 0000000..fe0c00b --- /dev/null +++ b/App/Sagas/index.js @@ -0,0 +1,5 @@ +import { watchTilePress } from './Gameboard' + +export default [ + watchTilePress +] diff --git a/App/Store/ConfigureStore.js b/App/Store/ConfigureStore.js index a9e8af0..d156c50 100644 --- a/App/Store/ConfigureStore.js +++ b/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) diff --git a/package.json b/package.json index 12d1803..ce63d96 100644 --- a/package.json +++ b/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": {