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
constructor(reducer, initialState = {}) { | |
this.store = [ initialState ]; | |
this.reducer = reducer; | |
this.subscribers = []; | |
} |
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
// This is a reducer, same as Redux's | |
const reducer = (state, action) => { | |
switch(action.type) { | |
case 'FETCHING_TWEETS': | |
return {...state, fetchingTweets: true}; | |
break; | |
case 'TWEETS_RECEIVED': | |
return { ...state, | |
fetchingTweets: false, | |
tweets: action.tweets |
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
// Returns the last element from the state store | |
getState() { | |
return this.store[this.store.length - 1]; | |
} |
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
// Subscribe to receive notifications | |
store.subscribe(action => { | |
// Check the type of action | |
if(action == ‘TWEETS_RECEIVED’) { | |
// Clear notification | |
document.getElementById(‘notification’).innerText = ‘’; | |
// Construct the HTML for the tweets list |
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
// This is a reducer, same as Redux's | |
const reducer = (state, action) => { | |
switch(action.type) { | |
case 'FETCHING_TWEETS': | |
return {...state, fetchingTweets: true}; | |
break; | |
case 'TWEETS_RECEIVED': | |
return { ...state, | |
fetchingTweets: false, | |
tweets: action.tweets |
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
store.dispatch({ | |
type: ‘TWEETS_RECEIVED’, | |
isFetching: false, | |
tweets: [ | |
{ | |
username: ‘JamesJefferyUK’, | |
message: ‘💜 I ❤ Redux!’ | |
}, | |
{ | |
username: ‘JamesJefferyUK’, |
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
const initialState = { | |
fetchingTweets: false, | |
tweets: [] | |
}; | |
const store = new FauxRedux(reducer, initialState); |
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
/* | |
* This class is a high level view of how Redux works under the hood. | |
* This example includes no error handling or immutability and is used | |
* purely as an example to demonstrate how Redux works. | |
*/ | |
class FauxRedux { | |
// Just like Redux we accept a reducer, and some initial state | |
constructor(reducer, initialState = {}) { | |
this.store = [ initialState ]; |
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
// Shallow freeze | |
Object.freeze(state); | |
// This will not work | |
state.twitter = '@zuck'; | |
// Look, it's still @JamesJefferyUK | |
console.log(state.twitter); | |
// But this works because we're modifying a reference value (an object) |
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
const deepFreeze = o => Object | |
.getOwnPropertyNames(o) | |
.forEach(n=> { | |
if (typeof o[n] == 'object' && o[n] !== null) | |
deepFreeze(o[n]); | |
return Object.freeze(o); | |
}); |