Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/instacart/redux-rails-resource
Simple interface of redux-rails resources for react components
https://github.com/instacart/redux-rails-resource
rails-redux react redux
Last synced: 3 months ago
JSON representation
Simple interface of redux-rails resources for react components
- Host: GitHub
- URL: https://github.com/instacart/redux-rails-resource
- Owner: instacart
- License: apache-2.0
- Created: 2017-08-20T15:24:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T00:59:36.000Z (over 1 year ago)
- Last Synced: 2024-03-21T19:10:38.221Z (10 months ago)
- Topics: rails-redux, react, redux
- Language: JavaScript
- Homepage:
- Size: 14 MB
- Stars: 3
- Watchers: 126
- Forks: 7
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[redux-rails-resource](https://instacart.github.io/redux-rails-resource/)
=========================
Convenient Higher Order Component for React elements utilizing [the Redux-Rails middleware](https://github.com/instacart/redux-rails/)
[](https://circleci.com/gh/instacart/redux-rails-resource) [](https://www.npmjs.com/package/redux-rails-resource) [](https://github.com/instacart/redux-rails-resource/blob/master/LICENSE)
## Installation
You can use either `yarn` or `npm` to install redux-rails-resource and its dependencies.
### with yarn
```sh
yarn add 'redux-rails-resource'
```
### with npm
```sh
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+
## 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 `railsAction`s
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`.
### index
`index(queryParams: object)`
### update
`update(id: number, queryParams: object)`
### create
`create(objectAttributes: object)`
### destroy
`destroy(id: number)`
### updateFilters
`updateFilters(partialQueryParams: object)`
updateFilter will merge the existing queryParams of the corresponding resource with
the `partialQueryParams` argument.