Learn React Hooks

Defining the Provider component

We could now initialize the store in our App component, and pass it down to all of the other components. However, it is a better idea to use React Context. That way, we can access the store from anywhere in our app. MobX React offers a Provider component, which provides the store in a context.

Let's get started using the Provider component now:

1. Edit src/index.js, and import the Provider component from mobx-react:

import { Provider } from 'mobx-react'

2. Then, import the TodoStore from our store.js file:

import TodoStore from './store'

3. Now, we create a new instance of the TodoStore class:

const store = new TodoStore()

4. Finally, we have to adjust the first argument to ReactDOM.render(), in order to wrap the ...