// Old way
const carts = (state = { data: [], offset: 0, pending: false, error: null, hasMore: true }, action) => {
 switch(action.type) {
   case 'FETCH_CARTS_PENDING':
     // return new state telling fetching cart data is pending
   case 'FETCH_CARTS_SUCCESS':
     // return new state with the fetched data of the cart
   case 'FETCH_CARTS_FAIL':
     // return new state telling fetching carts failed
   case 'FETCH_CARTS_ADD_FIRST':
     // return new state with new cart data inserted at first index of the data array
   case 'FETCH_CARTS_ADD_LAST':
     // return new state with new cart data inserted at last index of the data array
   case 'FETCH_CARTS_REMOVE':
     // return new state that one cart item of all is removed
   case 'FETCH_CARTS_UPDATE':
     // return new state that one cart item of all is updated
   case 'FETCH_CARTS_REPLACE':
     // return new state that one cart item of all is replaced with another one
   default:
     return state;
 }
}

// New way
const carts = createAsyncPagingReducer('FETCH_CARTS');

Parameters

• actionTypePrefix: string

  Main action type

• extraReducer: AsyncPagingReducerFunction = null

• initialState: IAsyncPagingState = ...

  Initial state in form of { data: Array<T extends { id: any }>, offset: 0, pending: boolean, error: any, hasMore: boolean }

  // Example
  const carts = createAsyncPagingReducer('FETCH_CARTS');
  

Returns (state?: { data: IAsyncPagingData[]; error: any; hasMore: boolean; offset: number; pending: boolean; refreshing: boolean }, action: IAsyncPagingAction) => IAsyncPagingState

• • (state?: { data: IAsyncPagingData[]; error: any; hasMore: boolean; offset: number; pending: boolean; refreshing: boolean }, action: IAsyncPagingAction): IAsyncPagingState

  • Parameters

    • state: { data: IAsyncPagingData[]; error: any; hasMore: boolean; offset: number; pending: boolean; refreshing: boolean } = ...

      • data: IAsyncPagingData[]

      • error: any

      • hasMore: boolean

      • offset: number

      • pending: boolean

      • refreshing: boolean

    • action: IAsyncPagingAction

    Returns IAsyncPagingState

Parameters

• nameTypePairs: {}

  instance object that its properties representing reducer names and the property values representing action types

  • [key: string]: string | [string, AsyncPagingReducerFunction, IAsyncPagingState]

Returns AsyncPagingReducerGroup

instance of object that its properies points to created async reducers

Example

const product = createAsyncReducerGroup({
productList: ['FETCH_PRODUCTS', { data: [] }], // set initial state with empty array for property data
cartList: 'FETCH_CARTS',
});

const reducers = combineReducers({
...product,
});

// Old way
const profile = (state = { data: null, pending: false, error: null }, action) => {
 switch(action.type) {
   case 'FETCH_USER_PROFILE_PENDING':
     return { pending: true };
   case 'FETCH_USER_PROFILE_SUCCESS':
     return { pending: false, data: action.payload };
   case 'FETCH_USER_PROFILE_FAIL':
     return { pending: false, error: action.payload };
   default:
     return state;
 }
}

// New way
const profile = createAsyncReducer('FETCH_USER_PROFILE');

Parameters

• actionTypePrefix: string

  Main action type

• extraReducer: AsyncReducerFunction = null

  Reducer function that handle other custom action types

• initialState: IAsyncState = ...

  Initial state in form of { data: any, pending: boolean, error: any }

  // Example
  const profile = createAsyncReducer('FETCH_USER_PROFILE');
  

Returns (state?: { data: any; dataEntity?: {}; error: any; pending: boolean }, action: IAsyncAction) => IAsyncState

• • (state?: { data: any; dataEntity?: {}; error: any; pending: boolean }, action: IAsyncAction): IAsyncState

  • Parameters

    • state: { data: any; dataEntity?: {}; error: any; pending: boolean } = ...

      • data: any

      • Optional dataEntity?: {}

        • [key: string]: IAsyncState

      • error: any

        Tell if a reducer has error

      • pending: boolean

        Tell if a reducer is pending for any work

    • action: IAsyncAction

    Returns IAsyncState

Parameters

• nameTypePairs: {}

  instance object that its properties representing reducer names and the property values representing action types

  • [key: string]: string | [string, AsyncReducerFunction, IAsyncState]

Returns AsyncReducerGroup

instance of object that its properies points to created async reducers

Example

const product = createAsyncReducerGroup({
productList: 'FETCH_PRODUCTS',
productDetail: ['FETCH_PRODUCT_DETAIL', { data: {} }], // set initial state with instance object for property data
cartList: 'FETCH_CARTS',
});

const reducers = combineReducers({
...product,
});

Parameters

• init: IReducerBatchInit

  const reducers = createReducerBatch({
   mute: ['SET_MUTE', false],
   profile: ['SET_PROFILE', { name: '', gender: '' }]
  });
  
  // You will get a reducer like the following one
  reducers = {
   mute: function (state = false, action) { ... },
   profile: function (state = { name: '', gender: '' }, action) { ... }
  }
  

Returns IReducerBatch

Parameters

• options: IReducerGroupInit

• resetOption: IReducerGroupResetNode

Returns (state: IReducerGroupState, action: IAsyncAction) => IReducerGroupState

• • (state: IReducerGroupState, action: IAsyncAction): IReducerGroupState

  • Parameters

    • state: IReducerGroupState

    • action: IAsyncAction

    Returns IReducerGroupState