Flux REST API for redux infrastructure
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.
redux-api
doesn't bound you in using tehnologies for make ajax calls. It use configurable adapters
- a pretty simple function witch receive 2 arguments: url of endpoint and options - andreturn Promise as result. Default adapter has implemetation like this:
function adapterFetch(url, options) {
return fetch(url, options);
}
// if you like jquery style
function adapterJquery(url, options) {
return new Promise((success, error) {
$.ajax({ ...options, url, success, error });
});
}
This implementation allow to make any requests and process any responses.
And of course you have to setup adapter to your redux-api
instance before using.
reduxApi(....).use("fetch", adapterFetch)
Inspired by Redux-rest and is intended to be used with Redux.
=======
See DOCS.md for API documentation.
=======
with npm
npm install redux-api --save
with bower
bower install redux-api --save
=======
examples/isomorphic - React + Redux + React-Router + Redux-api with webpack and express + github api
rest.js
import "isomorphic-fetch";
import reduxApi, {transformers} from "redux-api";
import adapterFetch from "redux-api/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 backend
index.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")
);