Created
December 2, 2019 23:23
-
-
Save raydot/0ee1047e0e376c61c4413a738840cea1 to your computer and use it in GitHub Desktop.
Redux Tutorial Video 14 // source https://jsbin.com/neseqom
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> | |
<head> | |
<meta name="description" content="Video 14"> | |
<meta charset="utf-8"> | |
<title>Redux Tutorial</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.min.js"></script> | |
<script src="https://wzrd.in/standalone/expect@latest"></script> | |
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
// Let's take this reducer for a spin in Redux! | |
// Representing state as an array is all good and well, | |
// but how far can it take us? What if we want to add a | |
// visibility filter? | |
'use strict'; | |
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 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(state, action) { | |
if (state === undefined) state = []; | |
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(state, action) { | |
if (state === undefined) state = 'SHOW_ALL'; | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
// No need to modify existing reducers to work with | |
// visibility filter (another example of the reducer composition | |
// pattern): | |
var todoApp = function todoApp(state, action) { | |
if (state === undefined) state = {}; | |
// Note that "state" will be undefined the first time this is called. | |
// This gets the child reducers to return their initial states. | |
// Combined reducers handle all actions. | |
return { | |
todos: todos(state.todos, action), | |
visibilityFilter: visibilityFilter(state.visibilityFilter, action) | |
}; | |
}; | |
var _Redux = Redux; | |
var createStore = _Redux.createStore; | |
var store = createStore(todoApp); | |
console.log('Initial state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching ADD_TODO.'); | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 0, | |
text: 'Learn Redux' | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching ADD_TODO.'); | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 1, | |
text: 'Feed the Hamster' | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching TOGGLE_TODO.'); | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: 0 | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching SET_VISIBILITY_FILTER'); | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: 'SHOW_COMPLETED' | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// Let's take this reducer for a spin in Redux! | |
// Representing state as an array is all good and well, | |
// but how far can it take us? What if we want to add a | |
// visibility filter? | |
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; | |
} | |
} | |
// No need to modify existing reducers to work with | |
// visibility filter (another example of the reducer composition | |
// pattern): | |
const todoApp = (state = {}, action) => { | |
// Note that "state" will be undefined the first time this is called. | |
// This gets the child reducers to return their initial states. | |
// Combined reducers handle all actions. | |
return { | |
todos: todos( | |
state.todos, | |
action | |
), | |
visibilityFilter: visibilityFilter( | |
state.visibilityFilter, | |
action | |
) | |
} | |
} | |
const { createStore } = Redux; | |
const store = createStore(todoApp); | |
console.log('Initial state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO.') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 0, | |
text: 'Learn Redux' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO.') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 1, | |
text: 'Feed the Hamster' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching TOGGLE_TODO.') | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: 0 | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching SET_VISIBILITY_FILTER') | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: 'SHOW_COMPLETED' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
</script></body> | |
</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
// Let's take this reducer for a spin in Redux! | |
// Representing state as an array is all good and well, | |
// but how far can it take us? What if we want to add a | |
// visibility filter? | |
'use strict'; | |
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 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(state, action) { | |
if (state === undefined) state = []; | |
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(state, action) { | |
if (state === undefined) state = 'SHOW_ALL'; | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
// No need to modify existing reducers to work with | |
// visibility filter (another example of the reducer composition | |
// pattern): | |
var todoApp = function todoApp(state, action) { | |
if (state === undefined) state = {}; | |
// Note that "state" will be undefined the first time this is called. | |
// This gets the child reducers to return their initial states. | |
// Combined reducers handle all actions. | |
return { | |
todos: todos(state.todos, action), | |
visibilityFilter: visibilityFilter(state.visibilityFilter, action) | |
}; | |
}; | |
var _Redux = Redux; | |
var createStore = _Redux.createStore; | |
var store = createStore(todoApp); | |
console.log('Initial state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching ADD_TODO.'); | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 0, | |
text: 'Learn Redux' | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching ADD_TODO.'); | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 1, | |
text: 'Feed the Hamster' | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching TOGGLE_TODO.'); | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: 0 | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); | |
console.log('Dispatching SET_VISIBILITY_FILTER'); | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: 'SHOW_COMPLETED' | |
}); | |
console.log('Current state:'); | |
console.log(store.getState()); | |
console.log('--------------'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment