Skip to content

Instantly share code, notes, and snippets.

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.