This package requires React 16.8.4 or later.
Use the package manager npm to install react-boilerplate-redux-saga-hoc.
npm i react-boilerplate-redux-saga-hocor
yarn add react-boilerplate-redux-saga-hocNote: Before proceeding further. Please read the detail documentation from here
we are repeatedly creating constants, reducer, actions, saga whenever we want to call the api.Actually 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 create constants, reducer, saga, actions and also provides helper function to call those api as well as manupulating the state.
No need create constants, saga, reducer, actions everytime when you create a project or when you want to call the api.Just connect this hoc to the component and forget about creating reducer, saga, actions, constants.Hoc will do all things for you.
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 those 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 need.Just use the configuration on both react and react-native.
/** 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],
responseStatusKey: "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;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;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.
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
Yes ,this package will support for both react and react-native
Note: Please read the detail documentation from here
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.
Copyright (c) 2020-present Chrissie Fernando