Skip to content

Instantly share code, notes, and snippets.

👹

Sean Fridman sfrdmn

👹
Block or report user

Report or block sfrdmn

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View mcr_post_13.jsx
const { createSelector, createStructuredSelector } = require('reselect')
const identity = x => x
const createAsyncSelector = (
asyncSelectors = {},
syncSelectors = {},
compute = identity
) => {
// Let’s do a little argument dance to optionally support the uniform
// handling of synchronous selectors (selectors on data not conforming
View mcr_post_12.jsx
const FoodList = ({ loaded, data }) => {
if (!loaded) {
return <Spinner />
}
const { foodItemsWithFacts } = data;
return (
<ul className="food-list">
{
View mcr_post_11.jsx
const getAsyncFoodItemsWithFacts = createAsyncSelector(
{
foodItems: getAsyncFoodItems,
funFactsById: getFunFactsById
},
({ foodItems, funFactsById }) => (
mergeFunFactsIntoFoodItems(foodItems, funFactsById)
))
)
View mcr_post_10.jsx
const getFoodItemListViewState = createAsyncSelector({
foodItems: getAsyncFoodItems,
funFactsById: getAsyncFunFactsById
})
View mcr_post_09.jsx
const getAsyncFoodItems = state => state.foodItems
const getAsyncCookware = state => state.cookware
// Let’s introduce a new async resource containing fun facts about food
const getAsyncFunFactsById = state => state.funFactsById
View mcr_post_08.jsx
const { combineReducers } = require('redux')
const foodItemsLoadState = loadStateReducer({
FOOD_ITEMS_FETCH_PENDING: 'pending',
FOOD_ITEMS_FETCH_ERROR: 'error',
FOOD_ITEMS_FETCH_COMPLETE: 'complete'
})
const foodItemAddState = loadStateReducer({
FOOD_ITEMS_ADD_PENDING: 'pending',
View mcr_post_07.jsx
// Similar to the higher-order action creator, we accept a mapping of async
// states and action types, except this time, for convenience, in reverse.
// We then yield a reducer
const loadStateReducer = (asyncStates) => {
return (state = { loading: false, loaded: false, data: null }, action) {
const asyncState = asyncStates[action.type]
switch (asyncState) {
case 'pending':
return {
View mcr_post_06.jsx
const fetchFoodItems = createActionCreator(
{
pending: FOOD_ITEMS_FETCH_PENDING,
complete: FOOD_ITEMS_FETCH_COMPLETE,
error: FOOD_ITEMS_FETCH_ERROR,
},
() => () => foodService.fetchFoodItems()
)
const addFoodItem = createActionCreator(
View mcr_post_05.jsx
// Here we have a function which accepts a map of async states to action types
// as well as a thunk creator. It will yield a new thunk creator which wraps
// the provided one with our async state logic
const asyncActionCreator = (asyncTypes, createThunk) => (...args) => {
const thunk = createThunk(...args);
return (dispatch) => {
dispatch({ type: asyncTypes.pending })
// We assume here that the wrapped thunk produces a Promise
View mcr_post_04.jsx
const FOOD_ITEMS_FETCH_PENDING = 'FOOD_ITEMS_FETCH_PENDING'
const FOOD_ITEMS_FETCH_COMPLETE = 'FOOD_ITEMS_FETCH_COMPLETE'
const FOOD_ITEMS_FETCH_ERROR = 'FOOD_ITEMS_FETCH_ERROR'
const FOOD_ITEMS_ADD_PENDING = 'FOOD_ITEMS_ADD_PENDING'
const FOOD_ITEMS_ADD_COMPLETE = 'FOOD_ITEMS_ADD_COMPLETE'
const FOOD_ITEMS_ADD_ERROR = 'FOOD_ITEMS_ADD_ERROR'
//
const addFoodItem = item => (dispatch) => {
You can’t perform that action at this time.