All Projects → tungv → Redux Api Call

tungv / Redux Api Call

Licence: mit
One declarative API to create reducers, action creators and selectors for any API calls

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Redux Api Call

Slack
🎉✨ Slack API client for Node and browsers.
Stars: ✭ 903 (+1333.33%)
Mutual labels:  api, api-client
Hashapi Lib Node
Tierion Hash API client library for Node.js
Stars: ✭ 20 (-68.25%)
Mutual labels:  api, api-client
Cortex4py
Python API Client for Cortex
Stars: ✭ 22 (-65.08%)
Mutual labels:  api, api-client
Ngx Restangular
Restangular for Angular 2 and higher versions
Stars: ✭ 787 (+1149.21%)
Mutual labels:  api, fetch
Php Quandl
Easy access to the Quandl Data API using PHP
Stars: ✭ 51 (-19.05%)
Mutual labels:  api, api-client
Pizzly
The simplest, fastest way to integrate your app with an OAuth API 😋
Stars: ✭ 796 (+1163.49%)
Mutual labels:  api, api-client
Genius Php
PHP library for Genius API (http://genius.com/developers)
Stars: ✭ 10 (-84.13%)
Mutual labels:  api, api-client
Client
DigitalOcean API v2 client for PHP
Stars: ✭ 604 (+858.73%)
Mutual labels:  api, api-client
Devrant
Unofficial wrapper for the public devRant API.
Stars: ✭ 48 (-23.81%)
Mutual labels:  api, api-client
Apipie
Transform api declaration to js object for frontend. Inspired by VueRouter, koa-middleware and axios.
Stars: ✭ 29 (-53.97%)
Mutual labels:  api, api-client
Client
GitLab API v4 client for PHP
Stars: ✭ 763 (+1111.11%)
Mutual labels:  api, api-client
Api Php Client
PHP client of Akeneo PIM API
Stars: ✭ 56 (-11.11%)
Mutual labels:  api, api-client
Unifi Api Browser
Tool to browse data exposed by Ubiquiti's UniFi Controller API (demo: https://api-browser-demo.artofwifi.net/)
Stars: ✭ 677 (+974.6%)
Mutual labels:  api, api-client
Cv4pve Api Java
Proxmox VE Client API JAVA
Stars: ✭ 17 (-73.02%)
Mutual labels:  api, api-client
Pyowm
A Python wrapper around the OpenWeatherMap web API
Stars: ✭ 654 (+938.1%)
Mutual labels:  api, api-client
Abclinuxuapi
API for http://abclinuxu.cz.
Stars: ✭ 8 (-87.3%)
Mutual labels:  api, api-client
React Data Fetching
🎣 Declarative data fetching for React.
Stars: ✭ 496 (+687.3%)
Mutual labels:  api, fetch
Unifi Api Client
A PHP API client class to interact with Ubiquiti's UniFi Controller API
Stars: ✭ 602 (+855.56%)
Mutual labels:  api, api-client
Hoppscotch
👽 Open source API development ecosystem https://hoppscotch.io
Stars: ✭ 34,569 (+54771.43%)
Mutual labels:  api, api-client
Simple Salesforce
A very simple Salesforce.com REST API client for Python
Stars: ✭ 1,072 (+1601.59%)
Mutual labels:  api, api-client

npm codebeat badge

redux-api-call

Redux utilities for API calls using fetch with automatic race-conditions elimination.

npm i -S redux-api-call

Detailed API Reference

Migration from v0 to v1

The goals

One declarative API to create reducers, action creators and selectors for JSON any API calls

Examples

// EXAMPLE 1
// this will create data selector and action creator for your components to use
const todoListAPI = makeFetchAction(
  'TODO_LIST',
  (params) => ({ endpoint: `/api/v1/todos?page=${params.page}&limit=${params.limit}` })
);

// trigger fetch action
store.dispatch(todoListAPI.actionCreator({ page: 1, limit: 10 }));

// get the data
const todos = todoListAPI.dataSelector(store.getState());

// you can also use destructuring syntax for better readability
const { actionCreator: fetchTodos, dataSelector: todosSelector } = makeFetchAction(/* ... */);

// EXAMPLE 2
// race-condition elimination:
// if those commands are called in sequence
// no matter how long each request takes,
// page 2 and page 3 data will not have a chance to override page 4 data.
store.dispatch(fetchTodos({ page: 2 });
store.dispatch(fetchTodos({ page: 3 });
store.dispatch(fetchTodos({ page: 4 });

Get Started

Steps:

  1. install
  2. add reducer
  3. add middleware
  4. declare api definitions

First, you need to install the redux-api-call using npm or yarn

npm i -S redux-api-call

// OR
yarn add redux-api-call

Secondly, you need to add a reducer to your root reducer with a pathname is api_calls (In next releases, this name should be configurable, but for now, just use it)

// rootReducer.js
import { combineReducers } from 'redux';
import { reducers as apiReducers } from 'redux-api-call';

const rootReducer = combineReducers({
  ...apiReducers,
});

Then please import middleware from redux-api-call and put it to your redux middleware stack

// configStore.js
import { createStore, applyMiddleware } from 'redux';
import { middleware as apiMiddleware } from 'redux-api-call';

const middlewares = applyMiddleware(
  apiMiddleware
  // ... other middlewares (thunk, promise, etc.)
);
const store = createStore(rootReducer, {}, middlewares);

Most importantly, define your API. The simplest form only requires an endpoint

// state.js
import { makeFetchAction } from 'redux-api-call'
import { createSelector } from 'reselect'
import { flow, get, filter } from 'lodash/fp'

export const todoAPI = makeFetchAction('FETCH_TODOS', () => ({ endpoint: '/api/v1/todos' });

export const todosSelector = flow(todoAPI.dataSelector, get('todos'));
export const completeTodosSelector = createSelector(todosSelector, filter(todo => todo.complete));
export const incompleteTodosSelector = createSelector(todosSelector, filter(todo => !todo.complete));

And that's it. Now you have a bunch of action creators and selectors. You can use them anywhere you want. The following code is an example of using redux-api-call and react-redux

// example usage with react
// component.jsx
import react from 'react';
import { connect } from 'react-redux';
import { todoAPI } from './state';

// destructuring for better readability
const {
  fetchTodos,
  isFetchingSelector,
  completeTodosSelector,
  incompleteTodosSelector,
  errorSelector,
  lastResponseSelector,
} = todoAPI;

const connectToRedux = connect(
  state => ({
    loading: isFetchingSelector(state),
    error: errorSelector(state),
    completeTodos: completeTodosSelector(state),
    incompleteTodos: incompleteTodosSelector(state),
    lastResponse: lastResponseSelector(state),
  }),
  {
    fetchTodos,
  }
);

class TodosComponent extends React.Component {
  componentDidMount() {
    // first fetch
    this.props.fetchTodos();
  }

  render() {
    const { loading, error, completeTodos, incompleteTodos } = this.props;

    return <div>{/* ... your markup ...*/}</div>;
  }
}

export default connectToRedux(TodosComponent);

API

Detailed API Reference

FAQ

1. Can I use this without react?

Yes, wherever you can use redux, you can use redux-api-call

2. Can I use this with jQuery's $.ajax?

Yes, redux-api-call comes with a default adapter that fetch data using HTML5 FetchAPI and try to parse the response as JSON text. If the response is not a valid JSON, it will fall back to raw text. Advanced topics like Customer Adapters will show you how to use virtually any kind of request agent, include raw XHR to axios.

3. My backend send XML instead of JSON, can I use this package?

Yes, advanced topics like Customer Adapters will show you how to add custom parser to your response. So your backend can send JSON, XML, or any custom content-type of your choice.

4. I need to add a header for authentication on every request, can I write it once and use it everywhere?

Yes, advanced topics like Customer Adapters will show you how to add any kind of interceptors to your outgoing request. You can even access to redux store anytime you want to receive data before sending to your backend.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].