Store

📦 store

Creating a store

It's super simple, just instace Wallant set a state and it's all!

import Wallant from 'wallant'

const store = new Wallant({
  state: {
    counter: 0
  }
})

export default store

Binding store

Wallant it's focus on plug and play, and unplug, store has a method named use to define who Components would be listen for changes on store, Redux's connect put props into Components, Wallant collect component and make an update when a change it's produced in state.

import store from './store'

class App extends Component {
  componentDidMount () || constructor () {
    // store take component for
    // dispatch updates when state
    // change
    store.use(this)
  }
}

In fact from this to end store will control Reactivity in Component, btw, you can use PureComponent instead Component.

import React, { PureComponent } from 'react'

class MyComponent extends PureComponent {
  componentDidMount () {
    // ✅ good
    store.use(this)
  }
}

store.use don't pollute component with state or props, this is the reason because it's easy to integrate or unplug, Ex.

/*
* using Wallant
*/

class MyComponent extends PureComponent {
  componentDidMount () {
    store.use(this)
  }
  render () {
    return (
      <View>
        <Text>{ store.state.counter }</Text>
        <Button
          title="increment"
          onPress={() => {
            store.setState({
              counter: counter + 1
            })
          }}/>
      </View>
    )
  }
}

/*
* without Wallant
*/

class MyComponent extends Component {
  constructor (props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  render () {
    return (
      <View>
        <Text>{ this.state.counter }</Text>
        <Button
          title="increment"
          onPress={() => {
            this.setState({
              counter: counter + 1
            })
          }}/>
      </View>
    )
  }
}

Lifecycle store

Store has some hooks for know store state, but it's closed related with 📬 state →

---

Next page → 📬 state

About data, how mutate, and how consume