easy-redux-http-call

Created to make http call easy

Install

1npm install --save easy-redux-http-call

or

1yarn add easy-redux-http-call

Usage

Create Base

The CreateBase helps you to make HTTP calls easier. It's like having a special helper who knows how to talk to websites and get information for us. We can use it to ask http server for data without having to do all the setup work ourselves.

To use CreateBase, we need to give it some information. Here's an example:

1const main = new CreateBase({
2  store: store, // global store
3  baseApiUrl: "https://dummy.restapiexample.com/api/v1", // API Endpoint
4  httpFn: (data) =>  window.fetch[data.method](data.endpoint, data.params).then(
5      (res) => res.data
6    ), // HTTP Reqeust function
7});

• store: your existing store where you keep important information. don't worry, it will not wipe your data :)
• baseApiUrl: your API endpoint (without / at the end)
• httpFn (Optional): Gets the data we want and delivers it like a treasure, httpFn enabling you to write your own logic to make HTTP requests using Fetch, Axios or any other tool.
• defaultState (Optional): The initial state for every reducer (Note: It can be override later on).
• reducer (Optional): default reducer to store your data. (Note: It can be override later on).
• middleware (Optional): middleware allow you to perform different action on HTTP Request life cycle. Possility are limit less, you can do paggination, show notification on certain event, filter out data and much more (Note: It can be override later on).

Create base will return your 2 method. this method uses default configuration from the createBase class. you can override this configuration at any time you want.

Now, we have main with below methods

• createInstance: let you create basic instance of api (Can be used multiple time base don number of api's you have).
• createListInstance: it's same as createInstance but with additional functionality. allow you to perform delete and update operation without writing additional code. we will talk difference later on. stay tunned : )

Create API Instance

As metion before it let's you create instance to make your API call. surely you have multiple api's in your project. so for that you can use many time as you want. let's create first api instance

1export const AI_updateTourConfig = main.createInstance({
2  endpoint: "/employees",  // api endpoint
3  method: "get",  // http metion
4  reducer: "user",  // reducer name
5  reduxKey: "userDetail",  // key inside you reducer
6  action: "GET_USER_DETAIL",
7  onSuccess: (data) => data,
8});

• endpoint: your API Endpoint (must start with /)
• method: HTTP Method (GET, POST, PUT, DELETE)
• reducer: Your Reducer name in which you want to store result
• reduxKey: Redux which in which you want to store result
• action: static action name used to easily identification to your actions
• onSucess: callback executed when HTTP call succeed

createInstance will generate new instance and store it into AI_updateTourConfig. This instance has method "call" which makes the actual HTTP request.

Create Listing Instance

createListInstance use to create listing instance to make HTTP call with 2 methods(updateAction, deleteAction). This 2 method will help you to perform update and delete of records from the redux. this functions can be directly call from Socket.

1export const AI_BranchUserList = main.createListInstance({
2  endpoint: GET_BRANCH_USER_LIST_ENDPOINT,
3  method: "get",
4  id: "product_id",
5  reducer: "product",
6  reduxKey: "productList",
7  action: "GET_PRODUCT_LIST",
8  onSuccess: (data) => data,
9  middleware: myMiddleWare,
10});

Auto generated method will automatically update or remove records from given information at configuration time.

Middleware

Middleware in create instance is used to perform option on different state of the execution. All the callback of middleware are as bellow

• beforeStart
• afterSuccess
• afterUpdate
• afterDelete

Bind Reducer

Used to bind all the dynamic action to specified reducer. This will allow easy-reduc-http-call to handle state update for different situation.

const newUserReducer = bindReducer(configReducer, { key: "userReducer" });

Above code will be result as new reducer from the give reducer called newUserReducer. which can be used in combineRedux or directly used to create store.

useInstance

use useInstance hook which help you get easily fetch state of current HTTP request. you don't have to make any configuation.

const reduxState = useInstance(httpInstance);

reduxState contain value of given(httpInstance) instance state from the redux.

License

MIT © prafuliihglobal