Skip to content

Instantly share code, notes, and snippets.

View jasonrhodes's full-sized avatar

Jason Rhodes jasonrhodes

178 followers · 44 following
View GitHub Profile
@jasonrhodes
jasonrhodes / redux-async-hell.js
Created July 14, 2018 13:45
// these examples use thunks but the problem applies to most other redux async strategies
// action creator 1: get user
const getUser = async (id) => (dispatch) => {
dispatch({ type: 'GET_USER_PENDING', payload: id })
try {
const result = await doAsyncThing(id)
return dispatch({ type: 'GET_USER_SUCCESS', payload: result })
} catch (error) {
return dispatch({ type: 'GET_USER_FAILED', payload: error })
@jasonrhodes
jasonrhodes / render-props.jsx
Last active May 17, 2018 16:00
React HOCs and "Render Props" ... Note: If we're going to call it the "render prop" pattern, can we stop using props.children as the function?
// higher order component creator
const withFun = (Component) => (props) => <Component {...props} fun='Injected Secret Value' />
// using the higher order component (with this pattern, you have to create a component, THEN wrap it in the HOC creator function)
const _MyComponent = (props) => <div><h1>{props.fun}</h1></div>
const MyComponent = withFun(_MyComponent)
// "render prop" using children
@jasonrhodes
jasonrhodes / cv.md
Last active April 22, 2018 02:59
My speaking and writing CV

Jason Rhodes / Speaking and Writing CV

This is a list of links to slides, videos, and other information about tech talks I've given, as well as links to blog posts and articles I've written. They're in reverse chronological order. All of my slide decks can be found on my Speaker Deck profile, as well.

Blog Posts and Articles

@jasonrhodes
jasonrhodes / react-2018-talknotes.md
Created April 5, 2018 14:25

What's new with React, 2018 edition

Slides: https://speakerdeck.com/rhodesjason/whats-new-with-react-2018-edition

Links:

@jasonrhodes
jasonrhodes / _example.js
Last active March 30, 2018 18:02
// You can chain a list of this type of "chainable" http function with "callback hell"
chainA({ cb: (results) =>
chainB({ results, cb: () =>
chainC({ cb: (results) =>
chainD({ results })
})
})
})
// But I want a helper with this API:
@jasonrhodes
jasonrhodes / Redirect.jsx
Created March 27, 2018 18:35
import { Route } from 'react-router-dom'
export default function Redirect({ to, from, ...rest }) {
return <Route path={from} {...rest} render={({ location }) => (
<Redirect to={{ ...location, pathname: to }} />
)} />
}
@jasonrhodes
jasonrhodes / createContextWat.js
Created March 3, 2018 22:49
Trying to understand the new React 16.3 createContext source code
/**
* This file: https://github.com/facebook/react/blob/fb85cf2e9c52a4b2999144a89a6ee8256aec55c7/packages/react/src/ReactContext.js
* if you remove the <flow> stuff and the "calculate changed bits" stuff, it appears to be
* a function that, when called, returns an object literal with some weird circular references?
*
* How is this working / what am I missing here?
*/
export function createContext(defaultValue) {
const context = {
$$typeof: REACT_CONTEXT_TYPE,
@jasonrhodes
jasonrhodes / memoize-throttle-how.md
Last active February 24, 2018 21:44
I want to throttle a function but split up by args, is there an easy way?

Say you have a function that takes a single argument like this:

// return a string date that is "n" days before "right now"
function backInTime(n) {
  return subtract(new Date(), n, 'days').toString();
}

So if you call this (on Thurs, Feb 22) a few times in a row (pretending each one takes a full second to run) you would get:




  


  




    


          
    

      

        
        

          

              @jasonrhodes
          

          

            
                jasonrhodes
                / timezone.sh
            
            

              Last active
              January 10, 2022 23:13
            

              
                Manage your Mac OS X timezone like, super easy and stuff
              
          

        

      

        

  

    
    


        



  


  

        

          
          #!/usr/bin/env bash
        

        

          
          

        

        

          
          get() {
        

        

          
            sudo systemsetup -gettimezone
        

        

          
          }
        

        

          
          

        

        

          
          set() {
        

        

          
            sudo systemsetup -settimezone $1
        

        

          
          }
        

  





    


  




    


          
    

      

        
        

          

              @jasonrhodes
          

          

            
                jasonrhodes
                / async-redux-hell.md
            
            

              Last active
              November 20, 2017 22:37
            

              
                Async Redux Hell
              
          

        

      

        

  

      

    
The Rules


    

  1. Action creators must return something "simple". A plain object, a simple function call, or at worst: a thunk.
    2. 

  2. Internal API call logic must be encapsulated and abstracted away out of sight

      

    • authorization token decoration
      • 

    • refresh and retry logic
      • 

    • logout on fail logic
      • 

    

    3. 

  3. External API calls are subject to the same async processing as internal API calls (pending, success, fail events at minimum)
    4. 

  4. Internal API results trigger notifications for success and fail, according to a limited set of rules
    5. 

  5. Calls can be correctly chained (i.e. failures exit the chain), with access to previous call's response
    6.