Last active
May 14, 2018 15:52
-
-
Save tomgp/857d91291c1572fd602f4da5ddfd53b4 to your computer and use it in GitHub Desktop.
redux tutorial steps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Snap</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>Redux Snap!</h1> | |
| </body> | |
| <script> | |
| // ⬇ We'll write our code in here | |
| const snapModel = { | |
| turn: undefined, // whos turn it is | |
| playerCards: [[],[]], // a stack of cards for each player to draw from | |
| playedCards: [[],[]], // a stack of cards for each player to play on to | |
| winner: undefined, | |
| deckOfCards: [] // a place to keep the cards before they're shuffled or dealt | |
| } | |
| snapModel.deckOfCards = ['♥','♦','♠','♣'].reduce((deck, suit)=>{ | |
| for(let i=1; i<=13;i ++){ | |
| deck.push({ | |
| suit, | |
| number:i | |
| }) | |
| } | |
| return deck; | |
| }, []); | |
| const START_GAME = 'start'; | |
| const PLAY_CARD = 'play card'; | |
| const SHOUT_SNAP = 'shout snap'; | |
| </script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Snap</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>Redux Snap!</h1> | |
| </body> | |
| <script> | |
| // ⬇ We'll write our code in here | |
| const snapModel = { | |
| turn: undefined, // whos turn it is | |
| playerCards: [[],[]], // a stack of cards for each player to draw from | |
| playedCards: [[],[]], // a stack of cards for each player to play on to | |
| winner: undefined, | |
| deckOfCards: [] // a place to keep the cards before they're shuffled or dealt | |
| } | |
| snapModel.deckOfCards = ['♥','♦','♠','♣'].reduce((deck, suit)=>{ | |
| for(let i=1; i<=13;i ++){ | |
| deck.push({ | |
| suit, | |
| number:i | |
| }) | |
| } | |
| return deck; | |
| }, []); | |
| const START_GAME = 'start'; | |
| const PLAY_CARD = 'play card'; | |
| const SHOUT_SNAP = 'shout snap'; | |
| function snapReducer(state = snapModel, action) { | |
| const newState = JSON.parse(JSON.stringify(state)); //make a quick copy of the state, | |
| switch(action.type){ | |
| case START_GAME: | |
| return newState; | |
| case PLAY_CARD: | |
| return newState; | |
| case SHOUT_SNAP: | |
| return newState; | |
| default: | |
| return state; | |
| } | |
| console.error('oops, shouldn\'t be able to get here!'); | |
| } | |
| const {createStore} = Redux; | |
| const gameStore = createStore(snapReducer); | |
| gameStore.subscribe(()=>{ | |
| console.log(gameStore.getState()); | |
| }) | |
| gameStore.dispatch({type:START_GAME}); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment