Convenient Higher Order Component for React elements utilizing the Redux-Rails middleware

Downloads in past


1.0.24 years ago4 years agoMinified + gzip package size for redux-rails-resource in KB


redux-rails-resource =========================
Convenient Higher Order Component for React elements utilizing the Redux-Rails middleware
CircleCI npm license


You can use either yarn or npm to install redux-rails-resource and its dependencies.

with yarn

yarn add 'redux-rails-resource'

with npm

npm install 'redux-rails-resource'

Installing peer dependencies

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+


resource(resourceName: string, resourceOptions: object)(CustomComponent: ReactComponent)


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.


  • 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.


Collection React Component

import { resource, resourceProps } from 'redux-rails-resource'

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

  render() {
    const { models } = this.props.comments

    return (
        <NewCommentForm onCreate={this.handleCreate} />
        <CommentList comments={models} />

Member React Component

import { resource, resourceProps } from 'redux-rails-resource'

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 (
        <NameField value={name} onSave={this.handleChangeName} />
        <CompanyDisplay company={company} />

Paginated React Component

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 (
        <PaginationControl onPageChange={this.handlePageChange}
        <Filters onFilterSelect={this.handleFilterSelect}
        <PostList posts={this.posts.models} />


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.


index(queryParams: object)


update(id: number, queryParams: object)


create(objectAttributes: object)


destroy(id: number)


updateFilters(partialQueryParams: object)
updateFilter will merge the existing queryParams of the corresponding resource with the partialQueryParams argument.