@zenchef/mobx-react-controller
v1.1.1
Published
A Component and a Decorator to separate MobX powered React Components into a Controller and View
Downloads
4
Keywords
Readme
MobX React Controller
This project is meant to separate (pure) views from component state and lifecycle events. It is used in conjuction with mobx-react
In order to do that, There is a Controller
Component that is connected through the HoC connectController
Usage
In order to use, you need to have a component that extends Controller
Controller
extends React.Component and already defines a render method
You can add lifecycle events and regular state and methods to your controller component
The controller needs to define a method collect
that will provide props to the "dumb" view component
class MyController extends Controller {
collect() {
return {
foo: 'bar'
}
}
}
Then you need to use connectController
to connect the Controller and the View component
MyComponent = connectController(MyController)(({foo}) => {
<div>{foo}</div>
})
The View and the Controller are mobx-react observers so they will rerender if they use observable values that change
Example
Here is a working example
import { Controller, connectController } from 'mobx-react-controller'
class HelloController extends Controller {
state = {
name: 'World'
}
changeName = () => {
this.setState({ name: 'People' })
}
collect = () => {
return {
name: this.state.name,
changeName: this.changeName
}
}
}
const HelloView = ({ name, changeName }) => {
return (
<div>
<span>Hello {name} !</span>
<button onClick={changeName}>Change Name</button>
</div>
)
}
const Hello = connectController(HelloController)(HelloView)
It works well with mobx-react's inject
method :
import { Controller, connectController } from 'mobx-react-controller'
inject('myStore')
class HelloController extends Controller {
collect = () => {
return {
name: this.props.myStore.state.name,
changeName: this.props.myStore.changeName
}
}
}
const HelloView = ({ name, changeName }) => {
return (
<div>
<span>Hello {name} !</span>
<button onClick={changeName}>Change Name</button>
</div>
)
}
const Hello = connectController(HelloController)(HelloView)