Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
62 lines (44 sloc) 1.51 KB

.view.logic.js

Any View file can be also wrapped with JavaScript logic to make a Smart View.

With Counter.view file like:

Text
color black
text props.number

We can add a Counter.view.logic.js file that would increment a number by one every second like this:

import Counter from './Counter.view.js'
import React from 'react'

export default class CounterLogic extends React.Component {
  state = {
    number: 0,
  }

  componentDidMount() {
    this._interval = setInterval(this.increment, 1000)
  }

  componentWillUnmount() {
    clearInterval(this._interval)
  }

  increment = () => {
    this.setState({
      number: this.state.number + 1
    })
  }

  render() {
    return <Counter number={this.state.number} />
  }
}

A logic file is an extension to your view and Views imports that it if it's available. In other words, if you then use your Counter in other views, you will actually be using the Counter.view.logic.js instead.

This is where you would add any intermediate state to your views or connect them to an external store of data.

Reach out with questions via our Slack Questions Channel. Mention @tom or @dario to make sure that we get your notifications.

Control global state

Here's the video to the session that shows how to manage global state:

Control global state session

Here's the link to the repo shown in the video.