mobx-provide
Version:
MobX Store Provider Component Decorator
137 lines (101 loc) • 4.28 kB
Markdown
**MobX Store Provider Component Decorator**
[](https://github.com/semantic-release/semantic-release)
[](http://npm.im/mobx-provide)
[](http://opensource.org/licenses/MIT)
[](https://travis-ci.org/flipjs/mobx-provide)
[](https://codecov.io/github/flipjs/mobx-provide)
[](https://github.com/feross/standard)
[](http://commitizen.github.io/cz-cli/)
[](http://npm-stat.com/charts.html?package=mobx-provide&from=2016-03-24)
Do you like the convenience of importing store directly to your MobX component, but find testing a bit tricky? With `mobx-provide` decorator, you can still retain your imports, pass the store as props through the decorator, and just prepend your store with `props` or `this.props` or use destructuring like `const {store} = this.props` before the return statement in your `render()` method.
The `mobx-provide` is a decorator or higher-order component, that accepts a store object and a component as inputs, and returns a (enhanced) component.
## Usage
```js
const store = {usersStore, articlesStore, adminStore}
const ObserverComponentWithStore = provide(store)(observer(Component))
```
or
```js
const ObserverComponentWithStore = provide({
usersStore,
articlesStore,
adminStore
})(observer(Component))
```
```js
import React from 'react'
import { observer } from 'mobx-react'
import userProfile from 'stores/userProfile'
export class UserProfile extends React.Component {
render () {
return (
<div>
<h1>User Profile</h1>
<p>Name: {userProfile.name}</p>
<p>Email: {userProfile.email}</p>
</div>
)
}
}
export default observer(UserProfile)
```
### With Provide Decorator
```js
import React from 'react'
import { observer } from 'mobx-react'
import userProfile from 'stores/userProfile'
import provide from 'mobx-provide'
export class UserProfile extends React.Component {
render () {
const {userProfile} = this.props
return (
<div>
<h1>User Profile</h1>
<p>Name: {userProfile.name}</p>
<p>Email: {userProfile.email}</p>
</div>
)
}
}
const ObserverComponent = observer(UserProfile)
export default provide({userProfile})(ObserverComponent)
```
### The DIFF between the two
```diff
+ const {userProfile} = this.props
return (
<div>
...
</div>
)
```
```diff
- export default observer(UserProfile)
+ const ObserverComponent = observer(UserProfile)
+ export default provide({userProfile})(ObserverComponent)
```
There is not much difference between the two. You just have to reference the store using props:
`const {userProfile} = this.props`
Basically, you have to have two exports for your component, named export and default export. Your named export could be the plain component for your testing, and the default export for enhanced or observer component.
In your test file, import the plain component, create a new instance of your store and pass it as props as you normally would. Simple!
To contribute, please follow these steps:
1. Fork the repo
1. Make a branch for your change
1. Run `npm install`
1. Make your changes
1. Run `git add -A` to add your changes
1. Run `npm run commit` (**Do not** use `git commit`)
1. Push your changes with `git push`
1. Create the Pull Request
1. All done and celebrate!
* [Your name here](https://github.com/githubusername)
>Be the first to contribute!
MIT © [Felipe Apostol](https://github.com/flipjs)