Convenient Higher Order Component for React elements utilizing the Redux-Rails middleware
npm install redux-rails-resourceredux-rails-resource
=========================
Convenient Higher Order Component for React elements utilizing the Redux-Rails middleware
  
yarn or npm to install redux-rails-resource and its dependencies.sh
yarn add 'redux-rails-resource'
`$3
`sh
npm install 'redux-rails-resource'
`
$3
redux-rails-resource has a few peer dependencies required to use the library.
> If you already have these libraries listed in your app's dependencies, there's no need to install them again.- prop-types v15 or v16
- react v15 or v16
- react-redux 5.0.0+
- redux 3.7.0+
- redux-rails: 1.0.0+
Usage
resource(resourceName: string, resourceOptions: object)(CustomComponent: ReactComponent)#### resourceName
The key of the corresponding resource in the redux state defined by the
redux-rails config.This will be used as both
resource and controller when dispatching railsActions
from redux-rails. (NOTE: controller can be explicitly set via resourceOptions)The argument will also be the name of the key which will wrap everything passed down from
the
resource hoc to the wrapped component.#### resourceOptions
- autoload
- Will dispatch an
index call on componentDidMount. The sibling queryParams attribute will be passed as an argument if defined
- queryParams
- The optional argument to be passed to the index call if autoload is true
- controller string>
- Explicitly set the controller for railsActions.
- If set to a function, it must take the component's props as an argument and return a string
- propWrapper
- Explicitly set the name of the key which will wrap resource props
- onlyActions
- Do not pass redux state, only the corresponding railsActions. This may be more performant if the component does not need access to state.Examples
#### Collection React Component
`javascript
import { resource, resourceProps } from 'redux-rails-resource'@resource('comments')
class CommentSection extends Component {
static propTypes = {
comments: resourceProps.collection
}
componentDidMount() {
// GET request to /comments?deleted=false
// Stores the result in redux and updates this component's models
this.props.comments.index({ queryParams: { deleted: false } })
}
handleCreate = (commentAttributes) => {
// POST request to /comments
// The body of the post request will be JSON string of commentAttributes
this.props.comments.create(commentAttributes)
}
render() {
const { models } = this.props.comments
return (
)
}
}
`#### Member React Component
`javascript
import { resource, resourceProps } from 'redux-rails-resource'@resource('user')
class UserProfile extends Component {
static propTypes = {
user: resourceProps.member
}
handleChangeName = (name) => {
const { id } = this.comments.attributes
// PUT request to /comments/:id
// Second argument will be body of post request
this.props.comments.update(id, { name })
}
render() {
const { name, company } = this.props.comments.attributes
return (
)
}
}
`#### Paginated React Component
`javascript
import { resource, resourceProps } from 'redux-rails-resource'@resource('posts', { autoload: true })
class PaginatedPosts extends Component {
static propTypes = {
posts: resourceProps.collection
}
handlePageChange = (page) => {
this.props.comments.updateFilters({ page })
}
handleFilterSelect = (filter, value) => {
this.props.comments.updateFilters({ [filter]: value })
}
render() {
return (
)
}
}
`Actions
The resource hoc will pass down 5 functions as top level keys in the prop passed to the wrapped component: index, update, create, destroy, and updateFilters.$3
index(queryParams: object)$3
update(id: number, queryParams: object)$3
create(objectAttributes: object)$3
destroy(id: number)$3
updateFilters(partialQueryParams: object)updateFilter will merge the existing queryParams of the corresponding resource with
the
partialQueryParams` argument.