Base

The Tide class is where you instantiate your global store and define all of your Actions.

import {Base} from 'tide'

import State from 'path/to/your/state'
import TodoActions from 'path/to/your/todo/actions'

class Tide extends Base {
  constructor() {
    super()
    this.setState(new State())
    this.addActions('todo', TodoActions)
  }
}

export default Tide

The Tide class should be instantiated and passed down to your topmost Tide Component to make it available for use in the other Tide Components further down the tree.

import {Component as TideComponent} from 'tide'
import Tide from './path/to/your/tide'

const tide = new Tide()
const app = (
  <TideComponent tide={tide}>
    <App/>
  </TideComponent>
)
ReactDOM.render(app, document.getElementById('app'))

Static Methods

<ReactClass> wrap(<ReactClass> componentClass, <Object> tideProps)

Creates a new class from a React class and automatically wraps it to render within a TideComponent with the given props.

Methods

constructor()

Called after the class has been instantiated. Register your global state and actions here.

<State> getState()

Return the current global state.

setState(<State> state, [<Object> options])

Set the global state. A change event will trigger after the state has been updated. These change events are deferred to the end of the calling function, so you can safely call setState multiple times without performance impact. You can force the event to trigger immediately however with the {immediate: true} option. This is necessary when updating state inside an input element in response to a change event, to retain the position of the cursor.

updateState(<Function> updater, [<Object> options])

Update the global state with the given updater function. The updater will be called with the current global state as the first argument. Uses setState with the same available options and event triggering functionality.

mutate(keyPath, <Anytype> value |<Function> updater, [<Object> options])

Update the global state under the provided key path with the given value. One can also chose to pass a updater function which gets called with the existing value. The return value of the updater function will be the new value set for the passed key path. Uses setState with the same available options and event triggering functionality.

<Actions> getActions(<String> name)

Get a registered Actions instance by its name. Returns all actions if name is left out.

addActions(<String> name, <Actions> actionsClass)

Register an Actions class with the given name.

onChange(<Function> handler)

Add a handler to the change event, which is triggered whenever the global state changes.

offChange(<Function> handler)

Remove a handler from the change event.

emitChange()

Trigger a change event.

enableLogging(<Object> parameters)

Enables debug logging based on the values in parameters:

• {actions: true}: All action calls will be logged.
• {state: true}: All state changes will be logged.
• {components: true}: All component re-renders will be logged. The logged message will include whether the component updated in response to a state change, or due to an update further up the tree (only with impure components).