-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Description
What's the consensus on accessing the store from inside the component? Do you access it directly using import or pass as props?
Importing and accessing directly is very convenient, but how do you test it?
I started a new project a few weeks ago using Redux, and have migrated to using MobX completely. I pass store as props for easier testing. I use a decorator to pass the store:
import React from 'react'
import { observer } from 'mobx-react'
import store from '../store'
function UserList (props) {
const {users} = props.store
return (
<ul>
{users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
)
}
UserList.propTypes = {
store: React.PropTypes.object
}
function injectStore (Component) {
return (() => <Component store={store} />)
}
export default injectStore(observer(UserList))
My store looks like this:
import UiStore from './UiStore'
import UsersStore from './UsersStore'
import ArticlesStore from './ArticlesStore'
import OtherStore from './OtherStore'
const store = {
ui: new UiStore(),
users: new UsersStore(),
articles: new ArticlesStore(),
...
}
export default store
I have injectStore()
stored somewhere so I just import it when I need to use the store. Do you think this is viable? Will there be implications of passing a big fat store? My application seems working fine with it, but I'm still on the early stage of development.
I like the idea of importing the store directly, it just feels normal and straightforward. I'm just not sure how to test it and if its considered an anti-pattern.