0_itemsReducer.js

import { makeAsyncReducer } from 'redux-toolbelt'
import { getItems } from './actions'

const options = {
  defaultData: { items: [] },
  dataGetter: (state, {type, payload, meta}) => ({ items: payload })
}

export const itemsReducer = makeAsyncReducer(asyncAction, options)

1_using-the-async-reducer.js

import { itemsReducer } from './itemsReducer'
import { getItems } from './actions'

// the initial state
const state1 = itemsReducer(undefined, { type: '@@INIT' })
// state1 ⇒ {
//   loading: false,
//   data: { items: [] }
// }

// execution of the process starts
const state2 = itemsReducer(state1, getItems('some_id'))
// state2 ⇒ {
//   loading: true,
//   data: { items: [] }
// }

// success
const state3 = itemsReducer(state2, getItems.success(['item_0', 'item_1']))
// state3 ⇒ {
//   loading: false,
//   data: { items: ['item_0', 'item_1'] }
// }

// execution of the process starts again
const state4 = itemsReducer(state3, getItems('other_id'))
// state2 ⇒ {
//   loading: true,
//   data: { items: [] }
// }

// success again
const state5 = itemsReducer(state4, getItems.success(['new_item_0', 'new_item_1']))
// state5 ⇒ {
//   loading: false,
//   data: { items: ['new_item_0', 'new_item_1'] }
// }