React Boilerplate Redux Saga HOC

Note: This package is depricated.It is currently used for internal purpose only.

React Boilerplate Redux Saga HOC is a hoc for handling api calls as well as mataintaing redux state.

# Installation

This package requires React 16.8.4 or later.

Use the package manager npm to install react-boilerplate-redux-saga-hoc.

1npm i react-boilerplate-redux-saga-hoc

or

1yarn add react-boilerplate-redux-saga-hoc

# Setup

Beginner Tutorial

Installing on create-react-app scafolding

Installing on React-Boilerplate scafolding

Installing on React-Native

Installing on Next-js

Note: Before proceeding further.Please read the detail documentation from here

# Before Start

1. Why we created this hoc?

---

we are repeatedly creating constants, reducer, actions, saga whenever we want to make the API call.
We are doing the same thing again and again that will make most of the developers feel disconnected from coding.
To avoid that, we have created a Hoc for you to handle those repeated things.

2. Do i need the basic knowledge about redux-saga to use this hoc?

---

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

3. Who can use this hoc?

---

A person who wants to do development faster and also doesn't want to create constants, reducer, saga, actions repeatedly.

# Overview

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

It also handles success, errors, loader, canceling API calls when you are unmounting the component.
Most of the developers failed to cancel the API calls while unmounting the component.
That will create unwanted network traffic and also affect the performance of the application.
No worry Hoc will handle those things.

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

---

# Basic usage

# Store Configuration

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

1import React from 'react';
2import { Provider } from 'react-redux';
3import { store as configureStore } from 'react-boilerplate-redux-saga-hoc';
4
5const initialState = {};
6const connected_router_enable = false;
7const store = configureStore(initialState, connected_router_enable); // by default second parameter will be false
8export default function App(props) {
9  return (
10    <Provider store={store}>
11      <CustomComponent />
12    </Provider>
13  );
14}
15
16export default App;

# creating config file

1/* config.js */
2import { HOC as HocConfigure } from 'react-boilerplate-redux-saga-hoc';
3
4const HOC = HocConfigure({
5  handlers: [],
6  useHocHook: true /* This will help us to use hoc as a hook */,
7});
8
9const TEST_API =
10  'https://jsonplaceholder.typicode.com/posts/'; /* Default method GET */
11
12const REGISTER_API = { url: '/user/register', method: 'POST' };
13
14// const TEST_POSTS_API = {
15//   url: "https://jsonplaceholder.typicode.com/posts/",
16//   method: "POST",
17// };
18
19// const TEST_WITH_CONFIG_API = {
20//   url: "https://jsonplaceholder.typicode.com/posts/",
21//   method: "GET",
22//   responseStatusCode: [900] /* optional */,
23//   responseStatusCodeKey: "code" /* optional */,
24//   responseDataKey: "data" /* optional */,
25//   responseMessageKey: "message" /* optional */,
26// };
27
28const useAuthHoc = HOC({
29  initialState: {
30    profile: {},
31  },
32  dontReset: {
33    TEST_API /* If you pass anything on don't reset it wont reset the paricular state on setting to reset */,
34  },
35  apiEndPoints: { TEST_API, REGISTER_API },
36  constantReducer: ({ type, state, resetState }) => {
37    /* For handling custom action */
38    if (type === 'logout') return resetState;
39    return state;
40  },
41  name: 'Auth' /* Reducer name */,
42});
43
44export { useAuthHoc };

# connecting hoc to the component and make the api calls

1/* basic-example.js */
2import React, { useEffect } from 'react';
3import {
4  HOC as HocConfigure,
5  useQuery,
6} from 'react-boilerplate-redux-saga-hoc';
7import { useAuthHoc } from './config';
8
9function basicExample(props) {
10  /* 
11  if you have wrapped with hoc instead of using hook you will get all the constants,actions...etc from props like given below
12  const {
13    Auth_hoc: {
14      reducerConstants: { TEST_API },
15      reducerName,
16      actions: { TEST_API_CALL, TEST_API_CANCEL },
17    },
18  } = props;  
19  */
20
21  const {
22    reducerConstants: { TEST_API },
23    reducerName,
24    actions: { TEST_API_CALL, TEST_API_CANCEL },
25  } = useAuthHoc();
26
27  /* useQuery hook for getting data from the reducer */
28
29  const { loader, data, lastUpdated, isError, error, toast } = useQuery(
30    reducerName,
31    TEST_API,
32  );
33
34  useEffect(() => {
35    TEST_API_CALL();
36    /* for cancelling api calls on unmounting */
37    return () => TEST_API_CANCEL();
38  }, []);
39
40  return (
41    <ul>
42      {data.map(({ title, id }) => (
43        <li key={id}>{title}</li>
44      ))}
45    </ul>
46  );
47}
48
49export default basicExample;
50// export default compose(AuthHoc)(basicExample); you can connect this component with hoc by toggling useHocHook to false in HocConfigure

1. This is the image from Redux Store for initial state after connecting hoc to the component

# Things to Remember

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

2. This is the image from Console where hoc will provide actions, constants for handling tasks

# Things to Remember

- 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

1. state from Redux Store before api gets success or failure

# Things to Remember

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

4. This is state from Redux Store after api gets success

# Things to Remember

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

# using useQuery hook in different ways

1/* accessing multiple data  at single query */
2/*
3  use this method if you are accessing multiple data from the same reducer key
4*/
5const [
6  test_data
7  test,
8  test_deep,
9  testGetApi,
10] = useQuery(
11  reducerName /* can pass any reducer key such as 'Auth' , 'router' , ..etc*/,
12  [
13    {
14      key: TEST_API,
15      initialLoaderState: true,
16    },
17    {
18      key: TEST_API,
19      query: ".data[0]",
20      initialLoaderState: false,
21    },
22    {
23      key: TEST_API,
24      query: ".data",
25      initialLoaderState: false,
26      default: [], // Default for data key it also check's type of data..if type is object return [].Don't pass if you dont want to type check
27    },
28    TEST_API,
29  ]
30);
31
32/* query can be used in different ways based on your requirement */
33
34/* pass array of string instead of object */
35
36const [
37 { loader, data, lastUpdated, isError, error, toast },
38] = useQuery(reducerName, [TEST_API]);
39
40/* Pass an object instead of array */
41const data = useQuery(reducerName, {
42  key: TEST_API,
43  query: ".data",
44  default: [],
45});
46
47/* pass a string insted of array */
48const { loader, data, lastUpdated, isError, error, toast } = useQuery(
49  reducerName,
50  TEST_API
51);
52
53/* Pass a config as a third parameter its optional */
54const data = useQuery(reducerName, TEST_API, {
55  query: ".data",
56  default: [],
57});
58
59/* for getting whole reducer data */
60const data = useQuery(); // Don't use this until its required it will render the component every time state change
61const data = useQuery(reducerName); // Don't use this until its required it will render the component every time state change

#Params

# task - <Object>

Props	Description	value	Default Value	type	usage
name	Type of task to execute	Data-Handler, Infinite-Handler, Delete-Handler, Update-Handler, Update-Key-Handler, Toggle-Key-Handler, Splice-Data-Handler, Delete-Key-Handler, Don't-Update-Data-Handler, Custom-Handler,	Data-Handler	string	{ name: 'Data-Handler' }
clearData	clear previous stored data	true or false	false	boolean	{ clearData: true }
subKey	for doing various tasks on deep object	[]	null	array	{ subKey: ['data','filter-1'] }
limit		number	null	number	{ name: 'Infinite-Handler', limit: 15 }
isAppendTop		true or false	false	boolean	{ isAppendTop: true }
deleteKey		[]	null	array	{ deleteKey: ['age','name'] }
id		[]	null	array	{ id: [1,2] }
key		string	null	string	{ key: 'id' }
spliceKey		[2,4]	null	array	{ spliceKey: [2,4] }
toggleKey		[]	null	array	{ toggleKey: ['age','name'] }
values		[] or {}	null	array or object	{values: {2: {name: 'ram'}}} {values: [{name: 'sundar'}]}
updateCallback		function	null	function	{updateCallback: (previousData,responseData) => previousData.concat(responseData)}

# request - <Object>

Props	value	Default Value	type	usage
query	{}	null	object	{query: { id: 20 }}
params	{}	null	object	{params: { id: 20 }}
payload	{}	null	object	{payload: { id: 20 }}
axiosConfig	{}	null	object	{headers: {} }
paramSerializer	{}	{ arrayFormat: 'brackets' }	object	`{ arrayFormat: 'comma
asyncFunction	function	null	function	{asyncFunction : async (url) => fetch(url)}}
asyncFunctionParams	array	null	array	{asyncFunctionParams: ['https://www.example.com/']}
retry	number	0	number	{retry: 3}
errorParser	function	null	function	{errorParser: () => {}}
polling	boolean	false	boolean	{polling: true}
pollingCount	number	Infinite	number	{pollingCount: 4}
delay	number	8000	number	{delay: 10000}
clearDataOnError	boolean	false	boolean	{clearDataOnError: false}
errorDataHandling	boolean	true	boolean	{errorDataHandling: false}
defaultErrorParser	boolean	false	boolean	{defaultErrorParser: true}

Before Proceeding Further

We already knows redux is a valuable tool for organising your state and also redux-saga is a powerful middleware for handling side Effects.With the help of those two tools we have created a package for handling api calls and storing data in an organised way.

# Why should i use this package

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.

# Benefits of using this package

Go to Top

- 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

# Whether this package will support for react-native

Yes ,this package will support for both react and react-native

Note: Please read the detail documentation from here

Important: This package now also support nextJS.Please read nextjs setup documentation from here

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

Copyright (c) 2020-present Chrissie Fernando