Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lexich/redux-api
Flux REST API for redux infrastructure
https://github.com/lexich/redux-api
api flux javascript react redux rest
Last synced: 6 days ago
JSON representation
Flux REST API for redux infrastructure
- Host: GitHub
- URL: https://github.com/lexich/redux-api
- Owner: lexich
- License: mit
- Created: 2015-08-12T10:11:44.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:41:56.000Z (almost 2 years ago)
- Last Synced: 2024-11-30T16:07:01.278Z (14 days ago)
- Topics: api, flux, javascript, react, redux, rest
- Language: JavaScript
- Homepage:
- Size: 4.97 MB
- Stars: 496
- Watchers: 12
- Forks: 88
- Open Issues: 53
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
### Redux-api
Flux REST API for redux infrastructure
[](https://travis-ci.org/lexich/redux-api)
[](http://badge.fury.io/js/redux-api)
[](https://coveralls.io/r/lexich/redux-api?branch=master)
## Introduction
`redux-api` solves the problem of writing clients to communicate with backends. It generates [actions](http://redux.js.org/docs/basics/Actions.html) and [reducers](http://redux.js.org/docs/basics/Reducers.html) for making AJAX calls to API endpoints. You don't need to write a lot of [boilerplate code](http://redux.js.org/docs/advanced/ExampleRedditAPI.html) if you use `redux` and want to exchange data with server.
Inspired by [Redux-rest](https://github.com/Kvoti/redux-rest) and is intended to be used with [Redux](https://github.com/gaearon/redux).
## Documentation
See [DOCS.md](docs/DOCS.md) for API documentation.
## Use cases
* [AuthorizationJWT.md](docs/AuthorizationJWT.md) - example of JWT Authorization
* [Scoping.md](docs/Scoping.md) - use scoping or using multiple redux-api instance without naming intersections.
## Install
With npm:
```sh
npm install redux-api --save
```
With bower:
```sh
bower install redux-api --save
```
If you don't use tools like webpack, browserify, etc and you want to load redux-api manually, the best way to add redux-api to your project is:
```js
window.ReduxApi = window["redux-api"];
// or
var ReduxApi = window["redux-api"];
// initialization code
```
=======
## Remote calls
`redux-api` doesn't bind you to a technology to make AJAX calls. It uses configurable `adapters` - a pretty simple function which receives 2 arguments: `endpoint` and `options`, and returns a Promise as result. The default adapter uses [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch), and has an implementation like this:
```js
function adapterFetch(url, options) {
return fetch(url, options);
}
```
However, you are not tied to using isomorphic-fetch. For instance, if you prefer to use jQuery, you can use the following adapter:
```js
function adapterJquery(url, options) {
return new Promise((success, error)=> {
$.ajax({ ...options, url, success, error });
});
}
```
This implementation allows you to make any request and process any response.
And of course you have to set up adapter to your `redux-api` instance before using.
```
reduxApi(....).use("fetch", adapterFetch)
```
=======
## Examples
[examples/isomorphic](https://github.com/lexich/redux-api/tree/master/examples/isomorphic) - React + Redux + React-Router + Redux-api with webpack and express + github API
### Example
rest.js
```js
import "isomorphic-fetch";
import reduxApi, {transformers} from "redux-api";
import adapterFetch from "redux-api/lib/adapters/fetch";
export default reduxApi({
// simple endpoint description
entry: `/api/v1/entry/:id`,
// complex endpoint description
regions: {
url: `/api/v1/regions`,
// reimplement default `transformers.object`
transformer: transformers.array,
// base endpoint options `fetch(url, options)`
options: {
headers: {
"Accept": "application/json"
}
}
}
}).use("fetch", adapterFetch(fetch));
```
index.jsx
```js
import React, {PropTypes} from "react";
import { createStore, applyMiddleware, combineReducers } from "redux";
import thunk from "redux-thunk";
import { Provider, connect } from "react-redux";
import rest from "./rest"; //our redux-rest object
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(rest.reducers);
const store = createStoreWithMiddleware(reducer);
function select(state) {
return { entry: state.entry, regions: state.regions };
}
class Application {
static propTypes = {
entry: PropTypes.shape({
loading: PropTypes.bool.isRequired,
data: PropTypes.shape({
text: PropTypes.string
}).isRequired
}).isRequired,
regions: PropTypes.shape({
loading: PropTypes.bool.isRequired,
data: PropTypes.array.isRequired
}).isRequired,
dispatch: PropTypes.func.isRequired
};
componentDidMount() {
const {dispatch} = this.props;
// fetch `/api/v1/regions
dispatch(rest.actions.regions.sync());
//specify id for GET: /api/v1/entry/1
dispatch(rest.actions.entry({id: 1}));
}
render() {
const {entry, regions} = this.props;
const Regions = regions.data.map((item)=>
{ item.name }
)
return (
Loading regions: { regions.loading }
Loading entry: {entry.loading}
{{ entry.data.text }}
);
}
}
const SmartComponent = connect(select)(Application);
React.render(
,
document.getElementById("content")
);
```
### [Releases Changelog](https://github.com/lexich/redux-api/releases)