stores.md

Stores

Store is source of data. Zefir uses MobX to make that data reactive.

Creating stores

Every file in src/** directory ending with .store.js is accessible by every connected component. Go to Connected Components to learn more.

// tasks.store.js
import {observable} from 'mobx'

export default observable({
  items: []
})

Accessing stores in Components

// task-list.js
import {connect} from 'zefir/utils'

const TaskList = ({
  stores: {
    tasks: {items, selectedTask},
    user: {isLoggedIn}
  }
}) => (
  <ul className='TaskList'>
    {items.map(item => (
      <div>{item.name}</div>
    ))}
  </ul>
)

export default connect(TaskList)