Skip to content

Instantly share code, notes, and snippets.

@Auraelius
Created August 10, 2019 20:30
Show Gist options
  • Save Auraelius/553662048af0a16c280a821a91cad88a to your computer and use it in GitHub Desktop.
Save Auraelius/553662048af0a16c280a821a91cad88a to your computer and use it in GitHub Desktop.
Decoding a code snippet with curried functions and a dispatcher function
// 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