1 | ## Listener
|
2 |
|
3 | **NOTE:** Radi has a [babel transformer plugin](https://github.com/radi-js/babel-plugin-transform-radi-listen) for listeners to be handled automatically (just like transformation from JSX to [hyperscript](#hyperscript)).
|
4 |
|
5 | Listeners watch for changes in the state of the assigned component and if changes happen it is responsible for re-rendering that part of view and updating it in DOM.
|
6 | Listener expects to receive component that it should listen to and path of state to listen to.
|
7 |
|
8 | ```jsx
|
9 | this.state = {
|
10 | person: {
|
11 | name: 'John'
|
12 | }
|
13 | }
|
14 | ...
|
15 | <h1>{ listener(this, 'person', 'name') }</h1>
|
16 | ```
|
17 |
|
18 | Listeners can also do some processing with that state value.
|
19 |
|
20 | ```jsx
|
21 | <h1>{ listener(this, 'count').process(count => count + 50) }</h1>
|
22 | ```
|