Created
December 2, 2019 23:43
-
-
Save raydot/482ad1b3baa1a8cb85e022d7f9bbac45 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; | |
} | |
}; | |
// Let's implement combineReducers from scratch! | |
var combineReducers = function combineReducers(reducers) { | |
return function (state, action) { | |
if (state === undefined) state = {}; | |
// reducers return a reducer! | |
return Object.keys(reducers).reduce( // call reducers for each key, fills the empty state below... | |
function (nextState, key) { | |
nextState[key] = reducers[key]( // corresponding reducers by given key | |
state[key], // corresponding state by given key | |
action); | |
return nextState; | |
}, {} // Initial next state before keys are processed. | |
); | |
}; | |
}; | |
// Mapping of state to reducers. | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
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; | |
} | |
} | |
// Let's implement combineReducers from scratch! | |
const combineReducers = (reducers) => { | |
return (state = {}, action) => { // reducers return a reducer! | |
return Object.keys(reducers).reduce( // call reducers for each key, fills the empty state below... | |
(nextState, key) => { | |
nextState[key] = reducers[key]( // corresponding reducers by given key | |
state[key], // corresponding state by given key | |
action | |
); | |
return nextState | |
}, | |
{} // Initial next state before keys are processed. | |
); | |
}; | |
}; | |
// Mapping of state to reducers. | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}) | |
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; | |
} | |
}; | |
// Let's implement combineReducers from scratch! | |
var combineReducers = function combineReducers(reducers) { | |
return function (state, action) { | |
if (state === undefined) state = {}; | |
// reducers return a reducer! | |
return Object.keys(reducers).reduce( // call reducers for each key, fills the empty state below... | |
function (nextState, key) { | |
nextState[key] = reducers[key]( // corresponding reducers by given key | |
state[key], // corresponding state by given key | |
action); | |
return nextState; | |
}, {} // Initial next state before keys are processed. | |
); | |
}; | |
}; | |
// Mapping of state to reducers. | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
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