Note: If you using version 1.2.0 or below please refer this documentation

-> we are repeatedly creating constants, reducer, actions, saga whenever we want to call the api.
-> We are doing the same thing again and again that will make us to feel disconnected from coding.
-> To avoid that, we have created a hoc for you to handle those repeated things.

-> No need to have basic knowledge about redux-saga.
-> We are using saga to handle api calls,because saga is a great library for handling all the side effects.

-> A person who want's to do development faster and also don't want to create constants, reducer, saga, actions again and again.

React Boilerplate Redux Saga HOC is a hoc for handling api calls as well as mataintaing redux state.
With the help of this hoc no need to worry about handling multipe api calls.
Because when you connect this hoc with the component it will automatically create constants, reducer, saga, actions for you.
And also provides method to call the api as well as manupulating the state.

It also handles success, errors, loader, canceling api calls when you are unmounting the component.
Most of the developer failed to cancel the calls while unmounting component.
This will create unwanted network traffic as well as unwanted storage space.
No worry hoc will provide a method for canceling api as well as clearing the unwanted data.

All you need to do is just connect this hoc to your component and add the api configuration thats it.
You are ready to call the api.No matter how many api's hoc will handle for you.

This package also supports for both React and React native.
So no need to worry about basic configuration and also no seperate coding needed.
Just use the configuration on both react and react-native.

npm i react-boilerplate-redux-saga-hoc

yarn add react-boilerplate-redux-saga-hoc

/** App.js **/
import React, { useEffect, useMemo } from "react";
import PropTypes from "prop-types";
import { Provider } from "react-redux";
import { compose } from "redux";
import {
  HOC as HocConfigure,
  commonConstants,
  store as configureStore,
} from "react-boilerplate-redux-saga-hoc";
const initialState = {};
const connected_react_router_enable = false; // By default it will be False.
/*
Note: Enable this true if you are using this package in your app https://www.npmjs.com/package (connected-react-router)
Note: Please dont't enable to true if you using react-native
Note: React Boilerplate by default using connected-react-router so you can enable to true if you are using react boilerplate https://github.com/react-boilerplate/react-boilerplate
*/
const store = configureStore(initialState, connected_react_router_enable);
const HOC = HocConfigure({ handlers: [] });
/* Note: You can pass custom handler in HocConfigure.You will learn more about handlers in later below  */
const AuthenticationHOC = HOC({
  initialState: {
    profile: {},
  },
  apiEndPoints: {
    TEST_API: {
      url: "https://jsonplaceholder.typicode.com/posts/",
      method: "GET",
      responseStatusCode: [900],
      responseStatusCodeKey: "code",
      responseDataKey: "data",
      responseMessageKey: "message",
    },
    REGISTER_API: {
      url: `users/user-signup/`,
      method: "POST",
    },
  },
  name: "Auth",
});
const CustomComponent = compose(AuthenticationHOC)((props) => {
  const {
    ON_SUCCESS,
    ON_UNMOUNT,
    ON_ERROR,
    ON_LOADING,
    ON_TOAST,
  } = commonConstants;
  const {
    Auth_data: { TEST_API, REGISTER_API },
    Auth_hoc: {
      actions: { TEST_API_CUSTOM_TASK, TEST_API_CALL, TEST_API_CANCEL },
    },
    getData,
  } = props;
  useEffect(() => {
    TEST_API_CALL();
    return () => {
      TEST_API_CANCEL(ON_UNMOUNT);
    };
  }, []);
  const { loader, data } = useMemo(() => getData(TEST_API, [], true), [
    TEST_API,
  ]);
  return (
    <div>
      {data.map(({ title }) => (
        <li>{title}</li>
      ))}
    </div>
  );
});
export default function App(props) {
  return (
    <Provider store={store}>
      <CustomComponent />
    </Provider>
  );
}
export default App;

- The image which we seeing above are the two endpoints which we created before.
- Hoc will create Constants, Reducer, Saga, Actions for You.
- No Need worry about creating seperate actions, reducers for every end-points.It will handle by itsself.
- Just provide the configuration.Hoc will handle all the task for you.

- Hoc will create 3 actions for you for handling api calls,handing data..etc
- REGISTER_API_CALL: ƒ () - for handling api calls
- REGISTER_API_CANCEL: ƒ () - for handling api cancel request
- REGISTER_API_CUSTOM_TASK ƒ () - for handling custom task without doing api calls
- CALL, CANCEL, CUSTOM_TASK will be created for every api end points

- Loader will change to true if api call triggers
- Toast will reset to initial state

- Loader will change to false if api call gets success or failure
- Toast will be set into to toast object
- Data will be stored into the data object

Note:
- No need to configure store seperately.
- Store can be imported from react-boilerplate-redux-saga-hoc.

import React from "react";
import { Provider } from "react-redux";
import { store as configureStore } from "react-boilerplate-redux-saga-hoc";
const initialState = {};
const connected_router_enable = false;
const store = configureStore(initialState, connected_router_enable); // by default second parameter will be false
export default function App(props) {
  return (
    <Provider store={store}>
      <CustomComponent />
    </Provider>
  );
}
export default App;

Important:
-This package is not an alternative for redux and redux-saga
-This package is mostly for developer who wants to make development faster and also to handle most of the api calls.

- Handles api calls by itself
- No need to create store, constants, actions, saga, reducer
- It handles cancelling api call by itself
- Handles error, success, cancel, loading, infinite data handling
- No worry about api calls, loaders...etc
- No separate coding needed for react and react native

import { HOC, commonConstants, store } from "react-boilerplate-redux-saga-hoc";
import { compose } from "redux";
import {
  DEMO_GET_API,
  DEMO_POST_API,
  DEMO_DELETE_API,
  DEMO_PUT_API,
} from "./api-end-points.js";
import useCustomHook from "./hooks"; // you will find creating custom hooks below
const AuthenticationHOC = HOC({
  initialState: {
    profile: {},
  },
  apiEndPoints: {
    DEMO_GET_API,
    DEMO_POST_API,
    DEMO_DELETE_API,
    DEMO_PUT_API,
  },
  name: "Auth",
});
const CustomComponent = compose(AuthenticationHOC)((props) => {
  const hooks = useCustomHook(props, { commonConstants }); // discuss later below
  const {
    get: { data },
  } = hooks;
  console.log(props, data);
  return (
    <div>
      {data.map(({ title }) => (
        <li>{title}</li>
      ))}
    </div>
  );
});

Note:
 -Data will be store in reducer once api call gets success or failure
 -No need to create seperate constants for error or success
 -Hoc will handle all the success, failure, Cancel tasks

Note:
 -Data will be stored automatically in the reducer and also it handles all the states..such as error,infinte,loader..etc

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: `${BASE_URL}user/`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL();

Note:
  -No need to worry about appending query.
  -Its more simpler just pass the object in the query parameter that will append query in the url.
  -And also passing params is simpler.

Note:
 -If you need to pass params in the url.
 -Then you have to change the url to function to receive params.just like give below.

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: ({ id }) => `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  request: {
    params: { id: 1 },
    query: { skip: 10, age: [20, 20] },
    payload: { age: 20 }, // for post calls
    paramsSerializer: { arrayFormat: "bracket" }, //default: none - refer query-string npm package
  },
});

Note:
  -Callback are another helper function which handles errors, success, cancel..etc

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
const responseErrorParser = (data) =>
  (Array.isArray(data) &&
    data.reduce((acc, curr) => {
      const [key, message] = Object.entries(curr)[0];
      const payloadKey = key.split(",")[1];
      return {
        ...acc,
        [payloadKey]: message,
      };
    }, {})) ||
  {};
DEMO_API_CONFIGURATION_CALL({
  request: {
    params: { id: 1 },
    query: { skip: 10, age: [20, 20] },
    paramsSerializer: { arrayFormat: "bracket" }, //default: none - refer query-string npm package
    axiosConfig: {
      responseType: "application/json",
    },
  },
  callback: {
    successCallback: ({ res, data, message, status }) => {
      // handle toast or call any other api
    },
    errorCallback: ({
      error,
      errorData: responseErrorParser,
      message,
      status,
      errors,
    }) => {
      // handle toast or call any other api
    },
    finalCallback: () => {
      // this will get triggers for both api success or failure
    },
  },
});

1. Every actions has four keys they are tasks or task,request,callback,filter
2. tasks - for handling multiple tasks (you will find later in this documentation)
3. task - for handling single task (you will find later in this documentation)
4. request - for api request.It supports 5 keys they are query,params,payload,axiosConfig,    paramsSerializer.
5. filter - for handling different kind of data in same api (you will find later in this documentation)
6. callback - use for handling success or failure
7. Either you can use task or tasks,cannot use both at the same time.
8. If you use both tasks will be taken as priority.

Note:
   - Don't worry about terms Manually,Automatically, its just the common word we used in the real world.
   - The way how it stores or handles data i specified as manually, automatically thats it.You will get used to it.

Note:
   - Automatically -> It will handle api calls and stores data and also handles all the errors, success, loaders...etc

Note:
    - Manually -> It will slight different instead of api calls we are manually storing or updating data.
    - This util function will help you update data in particular reducer.
    - Also useful for doing various tasks without calling api

import { HOC, commonConstants, store } from "react-boilerplate-redux-saga-hoc";
const { ON_SUCCESS } = commonConstants;
const { DEMO_API_CONFIGURATION_CUSTOM_TASK } = props;
DEMO_API_CONFIGURATION_CUSTOM_TASK(ON_SUCCESS, {
  task: {
    name: "Data-Handler",
    response: {
      data: {
        commet: "This handler will help you to store data",
        name: "Example",
        age: 20,
      },
    },
  },
});

- Handlers are most important util for manupulating data and also for managing data in the reducer
 - There are almost 7 build in handlers are available (You will find later in this documentation)
 - Also if you want can create a own custom handler for executing your task

Note:
  - We are almost done with basic setup, api calls, storing data...etc.
  - Now the main things we have to retrieve the data from the reducer.
  - Don't Worry that is very much simpler than other task.
  - getData -> Its an util function which gets the data from the particular reducer and also formats the data in order.
  - (DEMO_API_CONFIGURATION, default || typeof data, initial-loader-state, filter)

import { useMemo } from "react";
const {
  getData,
  Auth_data: { DEMO_API_CONFIGURATION },
} = props;
const { loader, data, latUpdated, isInfinite, isInfiniteEnd } = useMemo(
  () => getData(DEMO_API_CONFIGURATION, {}, false),
  [DEMO_API_CONFIGURATION]
);

Note:
 -It will only update if the reponse data is object otherwise it will replace the data.
 -It won't update Array.
 -Array will be handle in diferent way.you will find Below

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: `${BASE_URL}user/`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Update-Handler",
  },
});
// Example: storedData = {
//   name: "example",
//   date: "22-8-2222",
// };
// responseData = {
//   name: "example 2",
// };
// UpdateData = {
//   name: "example 2",
//   date: "22-8-2222",
// };

Note:
 -If the update data is Array it requires extra 2 parameters to itentify the Object that is id,key

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Update-Handler",
    key: "id", // for handling array of object
    id: [2, 3],
  },
  request: {
    params: { id: 1 },
    query: { skip: 10, age: 20 },
    payload: { age: 20 }, // for post calls
    paramsSerializer: { arrayFormat: "bracket" }, //default: none - refer query-string npm package
  },
});
/*
Example:
storedData = [{
  id: 1
  name: 'example',
  date: '22-8-2222'
},
{
  id: 2
  name: 'example',
  date: '22-8-2222'
}]
responseData = {
  name: 'example 2'
}
UpdateData = [{
  id: 1
  name: 'example',
  date: '22-8-2222'
},
{
  id: 2
  name: 'example 2',
  date: '22-8-2222'
}]
*/

Note:
 -In the above scenario id number 3 will be ignored.
 -If u want to append or prepend data there are some other ways.you will find below

Note:
 -There are several callback are available can be used in different requirements

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Update-Handler",
    key: "id", // for handling array of object
    id: [2, 3],
    updateCallback: (storeData: oldData, responseData: newData) => {
      return { ...oldData, ...newData } || oldData.concat(newData); // It will update  the data in paricular reducer
    },
  },
  request: {
    params: { id: 1 },
    query: { skip: 10, age: 20 },
    payload: { age: 20 }, // for post calls
    paramsSerializer: { arrayFormat: "bracket" }, //default: none - refer query-string npm package
  },
  callback: {
    updateStateCallback: ({ state: updatedState, data: responseData }) => {
      return updatedState; // By default it takes the updated state if returns undefined or null
    },
    successCallback: () => {
      // handle success toast or call any other api
    },
    errorCallback: ({
      error,
      errorData: responseErrorParser,
      message,
      status,
      errors,
    }) => {
      // handle error toast or call any other api
    },
  },
});

import { HOC, commonConstants, store } from "react-boilerplate-redux-saga-hoc";
const { ON_SUCCESS } = commonConstants;
const { DEMO_API_CONFIGURATION_CUSTOM_TASK } = props;
DEMO_API_CONFIGURATION_CUSTOM_TASK(ON_SUCCESS, {
  task: {
    name: "Update-Handler",
    key: "id", // for handling array of object
    id: [2, 3],
    updateCallback: (storeData: oldData, responseData: newData) => {
      return { ...oldData, ...newData } || oldData.concat(newData); // It will update  the data in paricular reducer
    },
    response: {
      data: {
        age: "20",
      },
    },
  },
});

import { useMemo } from "react";
const {
  getData,
  Auth_data: { DEMO_API_CONFIGURATION },
} = props;
const { loader, data, latUpdated, isInfinite, isInfiniteEnd } = useMemo(
  () => getData(DEMO_API_CONFIGURATION, {}, false),
  [DEMO_API_CONFIGURATION]
);

Note:
 - Data will be stored automatically in the reducer and also it handles all the states.
 - Such as error,infinte,loader..etc

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: `${BASE_URL}user/`,
  method: "GET",
 responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
   task: {
    name: "Infinite-Handler",
    isAppendTop: true, // By default data will add below
    updateCallback: (storeData: oldData, responseData: newData) => {
      return { ...oldData, ...newData } || oldData.concat(newData); // It will update  the data in paricular reducer
    },
});

Note:
 - It will append data if already data is array.
 - Other wise it will replace the new data

Note:
 - It will store the data at the top instead of last

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: ({ id }) => `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Infinite-Handler",
    isAppendTop: true, // By default data will add below
  },
  request: {
    params: { id: 1 },
    query: { skip: 10, age: [20, 20] },
    payload: { age: 20 }, // for post calls
    paramsSerializer: { arrayFormat: "bracket" }, //default: none - refer query-string npm package
  },
});

Note:
   - Callback are another helper function which handles errors, success, cancel..etc

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
const responseErrorParser = (data) =>
  (Array.isArray(data) &&
    data.reduce((acc, curr) => {
      const [key, message] = Object.entries(curr)[0];
      const payloadKey = key.split(",")[1];
      return {
        ...acc,
        [payloadKey]: message,
      };
    }, {})) ||
  {};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Infinite-Handler",
    isAppendTop: true, // By default data will add below
  },
  request: {
    params: { id: 1 },
    query: { skip: 10, age: [20, 20] },
    paramsSerializer: { arrayFormat: "bracket" }, //default: none - refer query-string npm package
  },
  callback: {
    successCallback: ({ res, data, message, status }) => {
      // handle toast or call any other api
    },
    errorCallback: ({
      error,
      errorData: responseErrorParser,
      message,
      status,
      errors,
    }) => {
      // handle toast or call any other api
    },
  },
});

Note:
-Calling custom task will allow us to manipulate data without calling any api..such as adding count,linit,skip..etc

import { HOC, commonConstants, store } from "react-boilerplate-redux-saga-hoc";
const { ON_SUCCESS } = commonConstants;
const { DEMO_API_CONFIGURATION_CUSTOM_TASK } = props;
DEMO_API_CONFIGURATION_CUSTOM_TASK(ON_SUCCESS, {
  task: {
    name: "Infinite-Handler",
    isAppendTop: true, // By default data will add below
    response: {
      data: [
        {
          name: "example",
        },
      ],
    },
  },
});

import { useMemo } from "react";
const {
  getData,
  Auth_data: { DEMO_API_CONFIGURATION },
} = props;
const { loader, data, latUpdated, isInfinite, isInfiniteEnd } = useMemo(
  () => getData(DEMO_API_CONFIGURATION, {}, false),
  [DEMO_API_CONFIGURATION]
);

Note:
 -Data will be deleted automatically in the reducer and also it handles all the states..such as error,infinte,loader..etc

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: ({ id }) => `${BASE_URL}user/${id}`,
  method: "DELETE",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Delete-Handler",
    key: "id",
    id: [2],
  },
  request: {
    params: { id: 2 },
  },
});

Note:
   -It will remove that particular object in an array

Note:
 -It is almost similar to update, but instead of updating particular key it will delete the particular key from the object

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: ({ id }) => `${BASE_URL}user/${id}`,
  method: "DELETE",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Delete-Key-Handler",
    id: [1, 2, 3],
    key: "id",
    deleteKey: ["name", "age"],
  },
  request: {
    params: { id: 1 },
  },
});
/* 
Example:
data = [ { id: 1, name: 'name1',age: '13',gender: 'male' },{ id: 1, name: 'name1',age: '12',gender: 'female' }]
After executing task:
data = [ { id: 1, gender: 'male' },{ id: 2, gender: 'female' }]
*/

Note:
   -Calling custom task will allow us to manipulate data without calling any api..such as adding count,linit,skip..etc

import { HOC, commonConstants, store } from "react-boilerplate-redux-saga-hoc";
const { ON_SUCCESS } = commonConstants;
const { DEMO_API_CONFIGURATION_CUSTOM_TASK } = props;
DEMO_API_CONFIGURATION_CUSTOM_TASK(ON_SUCCESS, {
  task: {
    name: "Delete-Handler",
    id: [1, 2],
    key: "id",
  },
});

getData -> Its an util function which gets the data from the particular reducer and also formats the data in order.
   (DEMO_API_CONFIGURATION, default || typeof data, initial-loader-state, filter)

import { useMemo } from "react";
const {
  getData,
  Auth_data: { DEMO_API_CONFIGURATION },
} = props;
const { loader, data, latUpdated, isInfinite, isInfiniteEnd } = useMemo(
  () => getData(DEMO_API_CONFIGURATION, [], false),
  [DEMO_API_CONFIGURATION]
);

Note:
 -Suppose there is a scenario where same api is used with multiple filters.In that case we have to Store different data.

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: ({ id }) => `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  filter: ["name"],
  request: {
    params: { id: 2 },
    query: { type: "name" },
  },
});
/*
Example:
responseData = { id: 1 }
storeData = { name: { id: 1 }
*/

Note:
   -In this case it will store the data in an object with key 'name'

Note:
   -It is almost similar to update, but instead of updating particular key it will delete the particular key from the object

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: ({ id }) => `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Delete-Key-Handler",
    id: [1, 2, 3],
    key: "id",
    deleteKey: ["name", "age"],
  },
  filter: ["name"],
  request: {
    params: { id: 1 },
    paramsSerializer: { arrayFormat: "bracket" }, //default: none - refer query-string npm package
    query: { skip: 10, age: [20, 20] },
    payload: { age: 20 }, // for post calls
  },
});
/*
Example:
data = { name : [
  { id: 1, name: 'name1',age: '13',gender: 'male' },
  { id: 1, name: 'name1',age: '12',gender: 'female' }
]}
After executing task:
data = { name : [
  { id: 1, gender: 'male' },
  { id: 2, gender: 'female' }
}]
*/

Note:
   -Calling custom task will allow us to manipulate data without calling any api..such as adding count,limit,skip..etc

import { HOC, commonConstants, store } from "react-boilerplate-redux-saga-hoc";
const { ON_SUCCESS } = commonConstants;
const { DEMO_API_CONFIGURATION_CUSTOM_TASK } = props;
DEMO_API_CONFIGURATION_CUSTOM_TASK(ON_SUCCESS, {
  task: {
    task: "Delete-Handler",
    id: [1, 2],
    key: "id",
  },
  filter: ["name"],
});

getData:
   - Its an util function which gets the data from the particular reducer and also formats the data in order..(DEMO_API_CONFIGURATION, default || typeof data, initial-loader-state, filter)

import { useMemo } from "react";
const {
  getData,
  Auth_data: { DEMO_API_CONFIGURATION },
} = props;
const nameData = useMemo(
  () => getData(DEMO_API_CONFIGURATION, [], false, ["name"]),
  [DEMO_API_CONFIGURATION]
);
const ageData = useMemo(
  () => getData(DEMO_API_CONFIGURATION, [], false, ["age"]),
  [DEMO_API_CONFIGURATION]
);
/**
nameData returns 
{ loader, data, latUpdated, isInfinite, isInfiniteEnd } 
ageData returns 
{ loader, data, latUpdated, isInfinite, isInfiniteEnd } 
**/

Note:
   -Incase you want to update deep object we can use subkey to navigate to that object

const BASE_URL = "https://example.com/";
const DEMO_API_CONFIGURATION = {
  url: ({ id }) => `${BASE_URL}user/${id}`,
  method: "GET",
  responseStatusCode: [900],
  responseStatusCodeKey: "code",
  responseDataKey: "data",
  responseMessageKey: "status",
  errorMessageKey: "error",
};
DEMO_API_CONFIGURATION_CALL({
  task: {
    name: "Data-Handler",
    subKey: ["data"],
  },
  request: {
    params: { id: 2 },
    query: { type: "name" },
  },
  filter: ["name"],
});
/*
Example:
responseData = { data : { data: { id: 1 } } }
storeData = { name: { data: { id: 1 } }
*/