Trying Redux

In this example below you will see how to do a Trying Redux with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SRHerzog, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SRHerzog ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Trying Redux</title>
  
  
  
  
  
</head>

<body>

  
  <script src='https://npmcdn.com/react@15.3.0/dist/react.min.js'></script>
<script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/expect.js/0.2.0/expect.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SRHerzog/trying-redux-RRmpkr */
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var _Redux = Redux,
    createStore = _Redux.createStore,
    combineReducers = _Redux.combineReducers;


var todo = function todo(state, action) {
	switch (action.type) {
		case 'ADD_TODO':
			return {
				id: action.id,
				text: action.text,
				completed: false
			};
		case 'TOGGLE_TODO':
			if (state.id !== action.id) {
				return state;
			}
			return _extends({}, state, {
				completed: !state.completed
			});
		default:
			return state;

	}
};

var todos = function todos() {
	var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	var action = arguments[1];

	switch (action.type) {
		case 'ADD_TODO':
			return [].concat(_toConsumableArray(state), [todo(undefined, action)]);
		case 'TOGGLE_TODO':
			return state.map(function (t) {
				return todo(t, action);
			});
		default:
			return state;
	}
};
var visibilityFilter = function visibilityFilter() {
	var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'SHOW_ALL';
	var action = arguments[1];

	switch (action.type) {
		case 'SET_VISIBILITY_FILTER':
			return action.filter;
		default:
			return state;
	}
};

var todoApp = combineReducers({
	todos: todos,
	visibilityFilter: visibilityFilter
});
console.log(typeof todoApp === 'undefined' ? 'undefined' : _typeof(todoApp));

var store = createStore(todoApp);
console.log(store.getState());

Comments