redux-fetch-resource
v1.0.3
Published
A Complete solution for making Requests in redux applications
Downloads
86
Maintainers
Readme
redux-fetch-resource
redux-fetch-resource
is an attempt at a complete solution for making api requests in react/redux applications.
Installation
install redux-fetch-resource and redux-thunk
npm i --save redux-fetch-resource redux-thunk
redux-fetch-resource assumes the browser has the fetch and Promise apis. So polyfill them if you havn't done so already.
For API docs see the github pages site
Usage
Minimally, add the following to your redux store.
// == Store.js
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './Reducers.js';
export default createStore(
reducer,
applyMiddleware(
thunk,
ReduxFetchResource()
)
);
Now you are ready to define an endpoint
// === Actions.js
import {bindEndpointActionCreator} from 'redux-fetch-resource';
export const FETCH_USERS_STARTED = 'FETCH_USERS_STARTED';
export const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
export const FetchUsers = bindEndpointActionCreator(
'/users/:team',
{
startType: FETCH_USERS_STARTED,
successType: FETCH_USERS_SUCCESS
}
);
Hook up the actions in your reducers
// == Reducers.js
import {combineReducers} from 'redux';
import {FETCH_USERS_STARTED, FETCH_USERS_SUCCESS} from './Actions.js';
export default combineReducers({
loading (state = false, action) {
switch (action.type) {
case FETCH_USERS_STARTED:
return true;
case FETCH_USERS_SUCCESS:
return false;
default:
return state;
}
},
users (state = [], action) {
switch (action.type) {
case FETCH_USERS_SUCCESS:
return action.payload.body
default:
return state;
}
}
});
And use it in your components
// == UserList.jsx
import React from 'react';
import {connect} from 'react-redux';
import {FetchUsers} from './Actions.js';
const mapStateToProps = state => ({
users: state.users,
loading: state.loading
});
const mapDispatchToProps = dispatch => ({
onSubmit: (id, search) => dispatch(FetchUsers({
params: { team: id },
query: { q: search }
}))
});
@connect(mapStateToProps, mapDispatchToProps)
export default class UserList extends React.Component {
submit () {
return this.props.onSubmit(
this.props.teamId,
this.refs.search.value
);
}
render () {
return (
<div>
<input ref='search' type='text' />
<button onClick={() => this.submit()} >Search</button>
<ul>
{this.props.users.map(user => (
<li key={user.id} >{user.name}</li>
))}
</ul>
</div>
)
}
}