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 problem of writing client for communicating with backend. It generates actions and reducers for making ajax call to API endpoints. You don't need to write a lot of boilerplate code if 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.
=======
Install
with npm
npm install redux-api --savewith bower
bower install redux-api --save=======
Remote calls
redux-api doesn't bound you in using tehnologies for make ajax calls. It use configurable adapters - a pretty simple function which receives 2 arguments: url of endpoint and options - and returns a Promise as result. Default adapter has implemetation 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 edpoint 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: {
header: {
"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")
);