Created
August 10, 2019 20:30
-
-
Save Auraelius/553662048af0a16c280a821a91cad88a to your computer and use it in GitHub Desktop.
Decoding a code snippet with curried functions and a dispatcher function
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
// Got this snippet from the curriculum at https://courses.thinkful.com/fs-capstone-1-v1/checkpoint/6 at the "Hook up the API" section | |
// what is userid? what is dispatch? How many functions are here? What's getting returned? What does this do? | |
const {API_BASE_URL} = require('./config'); | |
export const fetchUserProfile = (userid) => dispatch => { | |
fetch(`${API_BASE_URL}/users/${userId}`).then(res => { | |
if (!res.ok) { | |
return Promise.reject(res.statusText); | |
} | |
return res.json(); | |
}).then(userProfile => { | |
dispatch(fetchUserProfileSuccess(userProfile)); | |
}).catch(err => dispatch(fetchUserProfileError(err))); | |
}; | |
// playing with the arrow functions to use the old notation (and manage context like and ) | |
// See https://stackoverflow.com/questions/32782922/what-do-multiple-arrow-functions-mean-in-javascript | |
// See note [1] | |
fetchUserProfile = function (userid) { | |
return function (dispatch) { | |
fetch(`${API_BASE_URL}/users/${userId}`) | |
.then(res => { | |
if (!res.ok) { | |
return Promise.reject(res.statusText); | |
} | |
return res.json(); | |
}).then(userProfile => { | |
dispatch(fetchUserProfileSuccess(userProfile)); | |
}).catch(err => | |
dispatch(fetchUserProfileError(err))); | |
}.bind(this) | |
}.bind(this) | |
// So this appears to be a way of passing a userid and a dispatch function as parameters to a function that returns a function that does a fetch, then checks the response, does the json conversion, and then calls (dispatches) either a success function. If there's a problem with the fetch, it dispatches an error function. | |
// So, the arrow functions are being used to "curry" multiple arguments into single arguments | |
// but what is the dispatch function? Don't recall that from the react curriculum? Is it something having to do with redux state management? | |
// https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-redux | |
// https://redux.js.org/introduction/three-principles | |
// and specifically | |
// https://github.com/reduxjs/redux-thunk | |
// https://stackoverflow.com/questions/47002774/what-does-dispatch-mean-do-and-why-is-it-used-when-we-have-then-and-cat | |
// So this snippet appears to be taken from a react-redux-thunk app | |
// Seems kinda distracting in a section on environment variables | |
/* ---- Note [1] ------------------------------------------------------- */ | |
handleChange = field => e => { | |
e.preventDefault(); | |
/// Do something here | |
} | |
// becomes | |
handleChange = function (field) { | |
return function (e) { | |
e.preventDefault() | |
} | |
} | |
/* ----------------------------------------------------------- */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment