React Boilerplate Redux Saga HOC

# Installation

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

or

yarn add react-boilerplate-redux-saga-hoc

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

---

Why we created this hoc?

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.

Do i need basic knowledge of redux-saga to use this hoc?

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.

Who can use this hoc?

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

# Overview

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.

---

# Basic usage

/** 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;

# Store Configuration

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;

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

---

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