Created
December 2, 2019 23:29
-
-
Save raydot/329f2f9d6f53d551abacf9c360cdd227 to your computer and use it in GitHub Desktop.
Redux Tutorial Video 15 // 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 15"> | |
<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; | |
} | |
}; | |
// The reducer composition pattern is so common that Redux provides | |
// a function called "combine reducers." | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
// Mapping of state to reducers. | |
var todoApp = combineReducers({ | |
// todos: todos, // key = fields of state object | |
// visibilityFilter: visibilityFilter // value = reducers it should call | |
// Because reducers and values are the same, the ES6 shorthand can be used: | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
// 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 | |
// ) | |
// } | |
// } | |
var _Redux2 = Redux; | |
var createStore = _Redux2.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; | |
} | |
} | |
// The reducer composition pattern is so common that Redux provides | |
// a function called "combine reducers." | |
const { combineReducers } = Redux | |
// Mapping of state to reducers. | |
const todoApp = combineReducers({ | |
// todos: todos, // key = fields of state object | |
// visibilityFilter: visibilityFilter // value = reducers it should call | |
// Because reducers and values are the same, the ES6 shorthand can be used: | |
todos, | |
visibilityFilter | |
}) | |
// 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; | |
} | |
}; | |
// The reducer composition pattern is so common that Redux provides | |
// a function called "combine reducers." | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
// Mapping of state to reducers. | |
var todoApp = combineReducers({ | |
// todos: todos, // key = fields of state object | |
// visibilityFilter: visibilityFilter // value = reducers it should call | |
// Because reducers and values are the same, the ES6 shorthand can be used: | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
// 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 | |
// ) | |
// } | |
// } | |
var _Redux2 = Redux; | |
var createStore = _Redux2.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