CODEWITHSUNDEEP
javascriptreact-nativemobx
David Schumann
David Schumann

Reputation: 14793

Where to put MobXProvider (Provider) in React Native app with multiple stores

I have trouble understanding the roles of Provider and @inject in the mobx-react/native package.

Most examples using the mobx Provider use it to provide a global store. Like so:

import { Provider as MobXProvider, observer } from 'mobx-react/native';
import myStore from './stores/myStore.js'

@observer
export default class App extends Component{
    render() {
      return(
      <MobXProvider store={myStore)>
        <NavigationStackOrSomethingElse />
      </MobXBrovider>)
    }
}

What exactly is Provider for? As far as I understand, I need it to @inject the store into the props of subsequent Views. Is there a way to provide and use the store in a single controller? Like so:

import { Provider as MobXProvider, observer } from 'mobx-react/native';
import myStore from './stores/myStore.js'

@inject('store')  // <-- doesn't work
@observer
export default class SomeSmallView extends Component{
  render() {
    return(
    <MobXProvider store={myStore)>
      <MyViewThings />
    </MobXBrovider>)
  }
  myAction() {
    this.props.state.doSomeStateThings();
  }

}

How are Providers used if multiple stores are used? Are they all provided in the Root screen? Are they provided by the parent screen of the component which wants to use it?

Upvotes: 2

Views: 645

Answers (1)

David Schumann
David Schumann

Reputation: 14793

So it turns out you always provide all stores you want to use in your app in the beginning:

<Provider chatStore={chatStore} wallStore={wallStore}>
  ...
</Provider>

And then simply use @inject to inject them into components which use them.

Upvotes: 2

Related Questions