sfrdmn

const reducer = (state, { type, payload }) => {  
  switch (type) {
    case 'ADD_FOOD_ITEM':
      return {
        foodItems: [
          ...state.foodItems,
          payload
        ]
      }
    default:

sfrdmn

const App = ({ foodItems, addFoodItem }) => (  
  <div>
    <ul>
      {
        foodItems.map(({ name, quantity }) => (
          <li>{name}, quantity: {quantity}</li>
        ))
      }
    </ul>

sfrdmn

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) => {  

sfrdmn

// 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

sfrdmn

const fetchFoodItems = createActionCreator(  
  {
    pending: FOOD_ITEMS_FETCH_PENDING,
    complete: FOOD_ITEMS_FETCH_COMPLETE,
    error: FOOD_ITEMS_FETCH_ERROR,
  },
  () => () => foodService.fetchFoodItems()
)

const addFoodItem = createActionCreator(  

sfrdmn

// 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 {

sfrdmn

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',

sfrdmn

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 

sfrdmn

const getFoodItemListViewState = createAsyncSelector({  
  foodItems: getAsyncFoodItems,
  funFactsById: getAsyncFunFactsById
})

sfrdmn

const getAsyncFoodItemsWithFacts = createAsyncSelector(  
  {
    foodItems: getAsyncFoodItems,
    funFactsById: getFunFactsById
  },
  ({ foodItems, funFactsById }) => (
    mergeFunFactsIntoFoodItems(foodItems, funFactsById)
  ))
)