html redux教程步骤

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html redux教程步骤相关的知识,希望对你有一定的参考价值。

<!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>
<!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>

以上是关于html redux教程步骤的主要内容,如果未能解决你的问题,请参考以下文章

react+redux教程undodevtoolsrouter

Redux 入门教程

(头条新闻)Cordova+React+OnsenUI+Redux新闻App开发实战教程

React+Redux学习笔记:React+Redux简易开发步骤

(头条)Cordova+React+OnsenUI+Redux新闻App开发实战教程

(头条新闻)Cordova+React+OnsenUI+Redux新闻App开发实战教程