https://github.com/zaibot/redux-saga-resources
https://github.com/zaibot/redux-saga-resources
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zaibot/redux-saga-resources
- Owner: Zaibot
- Created: 2017-01-13T13:16:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-25T05:18:55.000Z (over 6 years ago)
- Last Synced: 2025-02-13T00:35:58.065Z (4 months ago)
- Language: TypeScript
- Size: 164 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# redux-saga-resources
See also [redux-saga-resources-example](https://github.com/Zaibot/redux-saga-resources-example)
**Module under development**
## Usage
**Install**
```
npm install --save redux-saga-resources redux-saga-rest
```
**Configuration (TypeScript)**
```jsx
import { API, defaultMiddleware } from 'redux-saga-rest';
import { createResource, createEditor, httpMiddleware } from 'redux-saga-resources';
const api = new API('/api')
.use(defaultMiddleware());
export const resource = createResource('post', {}, httpMiddleware('/posts', api));
export const editor = createEditor('post', {}, resource);
```
**Configuration (ES6)**
```jsx
import { API, defaultMiddleware } from 'redux-saga-rest';
import { createResource, createEditor, httpMiddleware } from 'redux-saga-resources/es6';
const api = new API('/api')
.use(defaultMiddleware());
export const resource = createResource('post', {}, httpMiddleware('/posts', api));
export const editor = createEditor('post', {}, resource);
```
**Implementation**
```jsx
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
const saga = createSagaMiddleware();
const store = createStore(
combineReducers({
postResource: resource.reducer,
postEditor: editor.reducer
}),
null,
applyMiddleware(
saga
)
);
saga.run(resource.saga);
```
**Examples**
```jsx
store.dispatch(resource.creators.doList());
store.dispatch(resource.creators.doCreate(resource.create({ title: 'New Post' })));
store.dispatch(editor.creators.doCreate({ title: 'New Post' }));
```
## Configuration
### Editor
**createImmediately**
When editor is requested to create a new item the request is passed to the resource. When `createImmediately` is `false` the item will only be created during the first update.
```jsx
export const editor = createEditor('post', { createImmediately: false }, resource);
```
## React
**List of items**
```jsx
@connect(
(state) => ({
items: resource.selectors.items(state)
}),
(dispatch) => ({
create: () => dispatch(editor.creators.doCreate({ title: 'New Post' })),
edit: (item) => dispatch(editor.creators.doEdit(item))
})
)
class App extends Component {
render() {
return (
this.props.create()}>New Post
{this.props.items.map(post => (
{post.title}
this.props.edit(post)}>edit
))}
)
}
}
```
**Edit single item**
```jsx
@connect(
(state) => ({
item: editor.selectors.item(state),
unmodified: resource.fields.isUnmodified(editor.selectors.item(state)),
neverCommited: resource.fields.neverCommited(editor.selectors.item(state))
}),
(dispatch) => ({
create: () => dispatch(editor.creators.doCreate({ title: 'New Post' })),
edit: (item) => dispatch(editor.creators.doEdit(item)),
reload: (item) => dispatch(editor.creators.doRead(item)),
save: (item) => dispatch(editor.creators.doUpdate(item)),
remove: (item) => dispatch(editor.creators.doDelete(item))
})
)
class BlogPost extends Component {
render() {
return (
this.props.edit({ ...this.props.item, title: e.target.value })} />
this.props.create()}>New
this.props.reload()} disabled={this.props.neverCommited}>Reload
this.props.remove()} disabled={this.props.neverCommited}>Delete
this.props.save()} disabled={this.props.unmodified}>Save
)
}
}
```