Package Exports
- redux-api
- redux-api/lib/adapters/fetch
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-api) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Redux-api
Flux REST API for redux infrastructure
Introduction
redux-api solves the problem of writing clients to communicate with backends. It generates actions and reducers for making AJAX calls to API endpoints. You don't need to write a lot of boilerplate code if you use redux and wanted to exchange data with server.
Inspired by Redux-rest and is intended to be used with Redux.
=======
Documentation
See DOCS.md for API documentation.
Use cases
- AuthorizationJWT.md - example of JWT Authorization
- Scoping.md - use scoping or using multiple redux-api instance without naming intersections.
=======
Install
with npm
npm install redux-api --savewith bower
bower install redux-api --saveIf you don't use tools like webpack, browserify, etc and loading redux-api manually - the best way add redux-api to you project is:
<script src="(...)/redux-api.min.js"></script>
<script>
window.ReduxApi = window["redux-api"];
// or
var ReduxApi = window["redux-api"];
// initialization code
</script>=======
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: URL of endpoint and options - and returns a Promise as result. The default adapter has an implementation like this:
function adapterFetch(url, options) {
return fetch(url, options);
}
// if you like jquery
function adapterJquery(url, options) {
return new Promise((success, error)=> {
$.ajax({ ...options, url, success, error });
});
}This implementation allows one 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 - React + Redux + React-Router + Redux-api with webpack and express + github API
Example
rest.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)); // it's necessary to point using REST backendindex.jsx
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)=> <p>{ item.name }</p>)
return (
<div>
Loading regions: { regions.loading }
<Regions/>
Loading entry: {entry.loading}
<div>{{ entry.data.text }}</div>
</div>
);
}
}
const SmartComponent = connect(select)(Application);
React.render(
<Provider store={store}>
<SmartComponent />
</Provider>,
document.getElementById("content")
);