<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plunker</title>
<script src="https://unpkg.com/react@16.3.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/redux@4.0.0/dist/redux.js"></script>
<script src="https://unpkg.com/react-redux@5.0.7/dist/react-redux.js"></script>
</head>
<body>
<h2>Open browser console to view full results!</h2>
<div id='root'></div>
<script type="text/jsx" src="script.jsx"></script>
</body>
</html>
/*
* Open the console
* to see the state log.
*/
const 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 {
...state,
completed: !state.completed
};
default:
return state;
}
};
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
};
const visibilityFilter = (
state = 'SHOW_ALL',
action
) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
const { combineReducers } = Redux;
const todoApp = combineReducers({
todos,
visibilityFilter
});
const { createStore } = Redux;
const store = createStore(todoApp);
console.log('Initial state:') || displayInPreview('Initial state:');
console.log(store.getState()) || displayInPreview(store.getState().visibilityFilter);
console.log('--------------') || displayInPreview('--------------');
console.log('Dispatching ADD_TODO.') || displayInPreview('Dispatching ADD_TODO.');
store.dispatch({
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
});
console.log('Initial state:') || displayInPreview('Initial state:');
console.log(store.getState()) || displayInPreview(store.getState().visibilityFilter);
console.log('--------------') || displayInPreview('--------------');
console.log('Dispatching ADD_TODO.') || displayInPreview('Dispatching ADD_TODO.');
store.dispatch({
type: 'ADD_TODO',
id: 1,
text: 'Go shopping'
});
console.log('Initial state:') || displayInPreview('Initial state:');
console.log(store.getState()) || displayInPreview(store.getState().visibilityFilter);
console.log('--------------') || displayInPreview('--------------');
console.log('Dispatching TOGGLE_TODO.') || displayInPreview('Dispatching TOGGLE_TODO.');
store.dispatch({
type: 'TOGGLE_TODO',
id: 0
});
console.log('Initial state:') || displayInPreview('Initial state:');
console.log(store.getState()) || displayInPreview(store.getState().visibilityFilter);
console.log('--------------') || displayInPreview('--------------');
console.log('Dispatching SET_VISIBILITY_FILTER') || displayInPreview('Dispatching SET_VISIBILITY_FILTER');
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
});
console.log('Initial state:') || displayInPreview('Initial state:');
console.log(store.getState()) || displayInPreview(store.getState().visibilityFilter);
console.log('--------------') || displayInPreview('--------------');
// display in plunker preview
function displayInPreview(string) {
var newDiv = document.createElement("div");
var newContent = document.createTextNode(string);
newDiv.appendChild(newContent);
document.body.appendChild(newDiv)
}