https://github.com/fixate/redux-resx-feathers-middleware
Feathers middleware for redux-resx
https://github.com/fixate/redux-resx-feathers-middleware
Last synced: 2 months ago
JSON representation
Feathers middleware for redux-resx
- Host: GitHub
- URL: https://github.com/fixate/redux-resx-feathers-middleware
- Owner: fixate
- Created: 2017-03-16T11:38:47.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-23T17:28:57.000Z (over 7 years ago)
- Last Synced: 2024-04-24T05:47:53.209Z (about 1 year ago)
- Language: JavaScript
- Size: 25.4 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# redux-resx-feathers-middleware
Middleware for [redux-resx](https://github.com/fixate/redux-resx) using
`feathers-client`.
```shell
npm install --save redux-resx-feathers-middleware
```
## Usage
```javascript
import resxMiddleware from 'redux-resx-feathers-middleware';
import feathers from 'feathers-client';
import rest from 'feathers-client/rest';
import reducers from './reducers';
// Setup your feathers app - probably in a different file
const app = feathers().configure(rest('/api').fetch(fetch));
export default function createAppStore() {
return createStore(
reducers,
compose(
applyMiddleware(
resxMiddleware(app)
),
window.devToolsExtension ? window.devToolsExtension() : (f) => f
)
);
}
```
## Websocket support
Not yet - all we'd need to add is websocket events handlers that fire receiver actions
## Pagination (v0.1.0)
**WARNING: This API may change. I'd like feedback on it :)**
Pagination is handled by installing a `resultReducer` on your resource.
```javascript
import pagination from 'redux-resx-feathers-middleware';
const paginate = pagination({ perPage: 10 });
export const users = createResource({
name: '@resx/USER',
url: '/users',
// Add this to paginated endpoints
resultReducers: {
find: paginate,
},
});
```
This will add a `pagination` object to your resource state:
Here is an exmaple when using it in a component:
```javascript
import React, { PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { users } from '../../resources';
export const UsersPage = React.createClass({
displayName: 'UsersPage',
propTypes: {
findUsers: PropTypes.func.isRequired,
dispatch: PropTypes.func.isRequired,
users: PropTypes.object.isRequired,
},
componentWillMount() {
const { findUsers } = this.props;
findUsers({ query: { roles: 'admin' } });
},
render() {
const { users: { items, pagination }, dispatch } = this.props;
// *** Important bit here **
// Dispatch pagination.next to fetch the next items.
// The result of this call will be concatenated onto items.
const next = () => dispatch(pagination.next);
return (
Emails:
{JSON.stringify(items.map(i => i.email))}
{pagination ? Next : null}
);
},
});
function mapStateToProps(state) {
return {
users: users.selector(state),
};
}
const { find: findUsers } = users.actions;
export default connect(mapStateToProps, {
findUsers,
})(UsersPage);
```