mobx-provide

MobX Store Provider Component Decorator

Description

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

const store = {usersStore, articlesStore, adminStore}
const ObserverComponentWithStore = provide(store)(observer(Component))

or

const ObserverComponentWithStore = provide({
  usersStore,
  articlesStore,
  adminStore
})(observer(Component))

Example

With Direct Import

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

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

+ const {userProfile} = this.props
return (
  <div>
  ...
  </div>
)

- 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

Testing

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!

Contributing

To contribute, please follow these steps:

1. Fork the repo
2. Make a branch for your change
3. Run npm install
4. Make your changes
5. Run git add -A to add your changes
6. Run npm run commit (Do not use git commit)
7. Push your changes with git push
8. Create the Pull Request
9. All done and celebrate!

Contributors

• Your name here

Be the first to contribute!

License

MIT © Felipe Apostol