jerzyyy/redux

## redux
<!DOCTYPE html!>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
</head>

<body>
    <p id="resultat">Afficher résultat</p>
    <button id="add1">Add 1</button>
    <button id="remove1">Remove 1</button>
    <button id="add10">Add 10</button>
    <button id="remove10">Remove 10</button>
    <button id="reset">Reset</button>

    <script>
        // Action Start
        const addAction1 = {
            type: 'ADD1',
        };

        const removeAction1 = {
            type: 'REMOVE1',
        };

        const addAction10 = {
            type: 'ADD10',
        };
        const removeAction10 = {
            type: 'REMOVE10',
        };
        const resetAction = {
            type: 'RESET',
        };
        // Action End

        //Reducers Start
        const counterReducer = (state = 0, action) => {
            switch (action.type) {
                case 'ADD1':
                    return state + 1;
                case 'REMOVE1':
                    return state - 1;
                case 'ADD10':
                    return state + 10;
                case 'REMOVE10':
                    return state + 10;
                case 'RESET':
                    return state = 0;
                default:
                    return state;
            }
        }
        //Reducers End

        //Store start

        const {
            createStore
        } = Redux;
        const store = createStore(counterReducer);
        //Store end

        // Main

        const renderStore = document.getElementById('resultat');
        const render = () => {
            renderStore.innerHTML = store.getState();
        }

        store.subscribe(render);
        render();

        const add1 = document.getElementById('add1');
        add1.addEventListener('click', () => {
            store.dispatch(addAction1)
        });

        const remove1 = document.getElementById('remove1');
        remove1.addEventListener('click', () => {
            store.dispatch(removeAction1)
        });

        const add10 = document.getElementById('add10');
        add10.addEventListener('click', () => {
            store.dispatch(addAction10)
        });

        const remove10 = document.getElementById('remove10');
        remove10.addEventListener('click', () => {
            store.dispatch(removeAction10)
        });

        const Reset = document.getElementById('reset');
        reset.addEventListener('click', () => {
            store.dispatch(resetAction)
        });
    </script>


</body>

</html>
	<!DOCTYPE html!>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
	</head>

	<body>
	<p id="resultat">Afficher résultat</p>
	<button id="add1">Add 1</button>
	<button id="remove1">Remove 1</button>
	<button id="add10">Add 10</button>
	<button id="remove10">Remove 10</button>
	<button id="reset">Reset</button>

	<script>
	// Action Start
	const addAction1 = {
	type: 'ADD1',
	};

	const removeAction1 = {
	type: 'REMOVE1',
	};

	const addAction10 = {
	type: 'ADD10',
	};
	const removeAction10 = {
	type: 'REMOVE10',
	};
	const resetAction = {
	type: 'RESET',
	};
	// Action End

	//Reducers Start
	const counterReducer = (state = 0, action) => {
	switch (action.type) {
	case 'ADD1':
	return state + 1;
	case 'REMOVE1':
	return state - 1;
	case 'ADD10':
	return state + 10;
	case 'REMOVE10':
	return state + 10;
	case 'RESET':
	return state = 0;
	default:
	return state;
	}
	}
	//Reducers End

	//Store start

	const {
	createStore
	} = Redux;
	const store = createStore(counterReducer);
	//Store end

	// Main

	const renderStore = document.getElementById('resultat');
	const render = () => {
	renderStore.innerHTML = store.getState();
	}

	store.subscribe(render);
	render();

	const add1 = document.getElementById('add1');
	add1.addEventListener('click', () => {
	store.dispatch(addAction1)
	});

	const remove1 = document.getElementById('remove1');
	remove1.addEventListener('click', () => {
	store.dispatch(removeAction1)
	});

	const add10 = document.getElementById('add10');
	add10.addEventListener('click', () => {
	store.dispatch(addAction10)
	});

	const remove10 = document.getElementById('remove10');
	remove10.addEventListener('click', () => {
	store.dispatch(removeAction10)
	});

	const Reset = document.getElementById('reset');
	reset.addEventListener('click', () => {
	store.dispatch(resetAction)
	});
	</script>


	</body>

	</html>