Permalink
Browse files

Add resource object shorthand syntax and refactor examples

  • Loading branch information...
MrLeebo committed Oct 12, 2017
1 parent 936e171 commit 680255ad40aa26788f5b5c7421859199ca1932a7
View
@@ -127,8 +127,6 @@ The payload can be a massive object containing lots of information about the HTT
For details on mapProps, read the [react-redux connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) documentation.
For the full list of options, see [bindResource](docs/bindResource.md).
## Installation
```
View
@@ -40,62 +40,55 @@ import { todos, posts, users } from './resources'
Check the [documentation](resources.md) on resources for information about using resources and what kind of props they can offer for your React components.
### [bindResource](docs/bindResource.md)
You can use `bindResource` to automatically wire up all of the resource props as well as "fetch on mount" and "reset on unmount" behavior for a component. This is useful for page-level components that are associated to a particular resource.
Please read [bindResource.md](docs/bindResource.md) for more details.
### Creating a Basic Component
When rendering your resource state, be sure to check the `ready` and `error` states before attempting to use the `payload`.
```js
import React from 'react'
import PropTypes from 'prop-types'
import { bindResource, createClient } from 'redux-supermodel'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createClient } from 'redux-supermodel'
const client = createClient('http://jsonplaceholder.typicode.com')
const todos = client.createCollection('todos', { urlRoot: 'todos' })
export default function TodoList ({createTodos, ready, error, rows}) {
if (!ready) return <div className="loading">Please wait...</div>
if (error) return <div className="error">{error.response.data}</div>
export class TodoList extends Component {
componentDidMount = () => this.props.fetch()
componentWillUnmount = () => this.props.reset()
return (
<div>
render () {
const { create, ready, error, rows } = this.props
if (!ready) return <div className="loading">Please wait...</div>
if (error) return <div className="error">{error.response.data}</div>
return (
<div>
<button type="button" onClick={() => createTodos({title: 'new item'})}>
Create
</button>
<div>
<button type="button" onClick={create}>
Create
</button>
</div>
<table>
<tbody>{rows && rows.map(todo => <tr key={row.id}><td>{row.title}</td></tr>)}</tbody>
</table>
</div>
<table>
<tbody>{rows && rows.map(todo => <tr key={row.id}><td>{row.title}</td></tr>)}</tbody>
</table>
</div>
)
)
}
}
TodoList.propTypes = {
createTodos: PropTypes.func,
ready: PropTypes.bool,
error: PropTypes.object,
rows: PropTypes.array
export mapProps = state => {
const { ready, error, payload: { data } } = todos(state)
return { ready, error, rows: data }
}
export function mergeProps (stateProps, dispatchProps, ownProps) {
const { ready, error, payload } = stateProps.todos
return {
...ownProps,
...dispatchProps,
ready,
error,
rows: payload && payload.data
}
const actions = {
fetch: todos.fetch,
create: () => todos.create({ title: 'new item' }),
reset: todos.reset,
}
export default bindResource({ todos }, { mergeProps })(TodoList)
export default connect(mapProps, actions)(TodoList)
```
#### PropTypes
View
@@ -12,9 +12,25 @@ export const todos = client('todos')
// https://example.com/api/posts.json
export const posts = client('posts', { url: 'posts.json' })
// https://example.com/api/blogs/hello-world
export const blogs = client('blogs', { urlRoot: 'blogs', idAttribute: 'slug' })
blogs.fetch({ slug: 'hello-world' })
```
You can also pass an object to the client to define multiple resources at once.
```js
const resources = client({
todos: true,
posts: { url: 'posts.json' },
})
// same as client('todos') and client('posts', { url: 'posts.json' })
const { todos, posts } = resources
```
The rest of this document is going to go into more detail about how resources work, but if you're just browsing, you can skip all of the boring details and go directly to [bindResource](bindResource.md) which will show you how to connect your new resource to your React components!
The rest of this document is going to go into more detail about how resources work and what you can do with them.
## `client(name, options)`
Oops, something went wrong.

0 comments on commit 680255a

Please sign in to comment.