rah

redux-api-http

library to call api's using redux flow

Showing:

Popularity

Downloads/wk

1

GitHub Stars

0

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

4.7KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

redux-api-http

Library to send http request while following redux architecture.

Installation

npm install redux-api-http --save

Importing the service

it can be imported as a reference of class object

import {asyncService} from 'redux-api-http';

or, as the class itself

import AsyncService from 'redux-api-http';

in the first case we can import reducers also as a constant import

import {asyncService, apiReducer} from 'redux-api-http';

for the second case we need to fetch the reducer by creating object of class

import AsyncService from 'redux-api-http';

AsyncService service = new AsyncService();
let reducer = service.getReducer();

This service exposes two major function for users dispatch method for sending api request and remove method for removing api response from the store (the later functionality is useful in some cases)

method signature for dispatch

dispatch = function(key, api, method, data, headers) {
    // some defination
}

here key is the unique api identifier used to distinguish api data in store from one another. This package also export a constant object for method field

apiMethod = {
    GET: 'get',
    POST: 'post',
    PUT: 'put', 
    DELETE: 'delete'
}

to import it

import {apiMethod} from 'redux-api-http';

method signature for remove

remove = function(key) {
    // some defination
}

here key is the same key which we used in dispatch method to uniquely identify the api and distinguish its state in the store.

generalised usage

import {asyncService} from 'redux-api-http';

let data = {
    key1: 'value',
    key2: 'value'
};
let header = {
    header1: 'value',
    header2: 'value'
};

asyncService.dispatch('myApiKey', 'http://mySampleApi.com/service1', 'get', data, header);

asynService.remove('myApiKey');

Example


// Container Component
import React from 'react';
import ReactDOM from 'react-dom';
import {combineReducers, createStore} from 'redux';
import {Provider} from 'react-redux';
import {apiReducer} from 'redux-api-http';
import DummyComponent from '<path>';

let reducers = combineReducers({
    'apiReducer': apiReducer
});
let store = createStore(reducers);

class SomeComponent extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <DummyComponent />
            </Provider>
        );
    }
}
ReactDOM.render(<SomeComponent />, document.getElementById('container'));

// Dummy Component
import React from 'react';
import {asyncService, apiMethod} from 'redux-api-http';

class DummyComponent extends React.Component {
    componentDidMount() {
        this.props.dispatch(asyncService.dispatch('key','http://someapi.com/service', apiMethod.GET, {}, {}));
    }
    
    render() {
        console.log(this.props.someProp);
        return (
            <div>
                dummy component
            </div>
        );
    }
}

// here apiReducer is used because we register our reducer with this name in the above code
let mapStateToProps = (state) => ({
    someProp: state.apiReducer.key
})
export default connect(mapStateToProps)(DummyComponent);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100