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

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

or

1const ObserverComponentWithStore = provide({
2  usersStore,
3  articlesStore,
4  adminStore
5})(observer(Component))

Example

With Direct Import

1import React from 'react'
2import { observer } from 'mobx-react'
3import userProfile from 'stores/userProfile'
4
5export class UserProfile extends React.Component {
6  render () {
7    return (
8      <div>
9        <h1>User Profile</h1>
10        <p>Name: {userProfile.name}</p>
11        <p>Email: {userProfile.email}</p>
12      </div>
13    )
14  }
15}
16
17export default observer(UserProfile)

With Provide Decorator

1import React from 'react'
2import { observer } from 'mobx-react'
3import userProfile from 'stores/userProfile'
4import provide from 'mobx-provide'
5
6export class UserProfile extends React.Component {
7  render () {
8    const {userProfile} = this.props
9    return (
10      <div>
11        <h1>User Profile</h1>
12        <p>Name: {userProfile.name}</p>
13        <p>Email: {userProfile.email}</p>
14      </div>
15    )
16  }
17}
18
19const ObserverComponent = observer(UserProfile)
20
21export default provide({userProfile})(ObserverComponent)

The DIFF between the two

1+ const {userProfile} = this.props
2return (
3  <div>
4  ...
5  </div>
6)

1- export default observer(UserProfile)
2+ const ObserverComponent = observer(UserProfile)
3+ 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