fluxish

This project is for interview purposes only.

createStore

Creates a store. Stores contain state and handler functions that are used to update state.

let dispatcher = createDispatcher();
let store = api.createStore({
  state: {
    foo: 'bojack'
  }
}, dispatcher);

store.init();
let horse = store.get('foo');
//horse => 'bojack'

Parameters

• config object
  • state object - Object that will be copied to the initial state of the store.
  • actions object - Object with keys that match the names of actions. Values should be functions that will be executed when the dispatcher dispatches the action.
    • callback(action, state, store, eventBus)
  • events object - Object with keys that match event names. Values should be functions that will be executed when events are fired.
    • callback(data, state, store)
• dispatcher dispatcher - The result of the createDispatcher function call.
• template store (optional) - An existing store that will be inherited by this store.

Example

Using actions:

let dispatcher = createDispatcher();
let store = api.createStore({
  name: 'myStore',
  state: {
    name: 'bojack'
  },
  actions: {
    setName: (action, state, store) => {
      state.set('name', action.name);
      store.emitChange();
    }
  }
}, dispatcher).init();

store.subscribe(() => {
  let name = store.get('name');
  // name => 'todd'
});

dispatcher.dispatch({ type: 'setName', name: 'todd' });

Using events to send messages between stores:

let dispatcher = createDispatcher();
let myStore = api.createStore({
  name: 'myStore',
  state: {
    name: 'bojack'
  },
  'otherStore:customEvent' :  (data, state, store) => {
    state.set('name', data);
  }
}, dispatcher).init();

myStore.subscribe(() => {
  let name = store.get('name');
  // name => 'todd'
});

let otherStore = api.createStore({
  name: 'otherStore',
  actions: {
    otherAction: (action, state, store, eventBus) => {
      eventBus.emit('otherStore:customEvent', action.name);  
    }
  }
}, dispatcher)

dispatcher.dispatch({type: 'otherAction' name: 'todd'});

store.get()

The only API method that components need to use on the store object is the .get() method. The .get() method returns the value of a state's key.

Example

let dispatcher = createDispatcher();

let store = createStore({
  state: {
    dude: 'todd'
  }
}, dispatcher);

let guy = store.get('dude');
// guy => 'todd'

If the requested value of a .get() call is a function, the function will be called with a copy of the state data and the args supplied by the action.

Example

With function call in state object:

let dispatcher = createDispatcher();

let store = createStore({
  state: {
    foo: 1,
    add: function (state, num){
      // Note: calling state.set() or state.get() returns undefined.
      return state.foo + num;
    }
  }
}, dispatcher);

let result = store.get('add', 2);
// result => 3

Inheriting/Extending Stores

Stores can be inherited by other stores in order to maximize code re-use. When a store is inherited, its initial state, action handlers, and event handlers are copied to the new store.

To inherit a store, pass in an un-initiated store as the last argument to the createStore function:

let dispatcher = createDispatcher();

let store1 = createStore({
  state: {},
  events: {},
  actions: {
    myAction : function (action, state, store){
      state.set('letters', action.data);
      store.emitChange();
    }
  }
}, dispatcher); // Note: that .init() was not called!

// No actions defined in our target store.
// Call .init() on this store.
let store2 = createStore({
  state: {},
  events: {},
  actions: {}
}, dispatcher, store1).init(); // store1 passed in as last arg.

store2.subscribe(() => {
  let letters = store2.get('letters');
  // letters => 'xyz'
});

// store2 inherits the 'myAction' action handler.
// This dispatch will update the letters key of our store.
dispatcher.dispatch({
  type: 'myAction',
  data: 'xyz'
});

Calling .init() on a store will wire it up to the dispatcher/eventBus. When creating a store with the purpose of inheriting it, do not call .init() on the source store. Inheriting a store that has already has init() called on it will result in two action handlers running on every action, which is probably not what you want.

Overriding inherited actions/events

State and Action/Event handlers that are explicitly declared in the target store will override inherited handlers. This allows for stores to be copied, then customized as needed.

let dispatcher = createDispatcher();

// Source store has myAction handler defined.
let store1 = createStore({
  state: {},
  events: {},
  actions: {
    myAction : function (action, state, store){
      // Source store behavior is to set the 'letters' key to 'abc'
      state.set('letters', 'abc');
      store.emitChange();
    },
    otherAction: function (action, state, store){
      state.set('inherited', true);
    }
  }
}, dispatcher);

// Target store also has myAction defined
let store2 = createStore({
  state: {},
  events: {},
  actions: {
    myAction: function (action, state, store){
      // Target store overrides source to set 'letters' to 'def'
      state.set('letters', 'def');
      store.emitChange();
    }
  }
}, dispatcher, store1).init();

store2.subscribe(() => {
  let letters = store2.get('letters');
  // letters => 'def'

  // Pretend dispatcher.dispatch({type: 'otherAction'}) has been called here.
  let inherited = store2.get('inherited')
  // otherAction is not declared in the target, so it is inherited from the source store
  // inherited => true
});

dispatcher.dispatch({
  type: 'myAction'
});

See also

• The createDispatcher function.

createDispatcher()

Creates a dispatcher. The dispatcher handles the executing of actions and messages between stores. Only one dispatcher should ever be present at runtime.

const dispatcher = createDispatcher();

let name = dispatcher.register('myName', function (action) {
  console.log(action.message);
});

dispatcher.dispatch({ type: 'myAction', message: 'Howdy!'})
// => 'Howdy!'

dispatcher.register(name string, callback function)

Parameters

• name string - The name that will be given to the callback.

• handler function - Callback to be run when actions are dispatched. The callback being run receives the action payload, which and object with a type key to identify it. Actions may also have other payload data.

  • callback(action object)

dispatcher.dispatch(action object)

Run all registered callbacks with the given action payload.

Parameters

• action object - The action payload that will be passed to all registered callbacks. The object must have a type key defined with a string value to identify the action. Additional data can be supplied in the object.

dispatcher.waitFor(names array, callback function)

Wait for a list of functions to execute before running the supplied callback.

Parameters

• names array - A list of callback names (strings)
• callback function - The function to be executed once all other registered callbacks have completed execution.

const dispatcher = createDispatcher

let initialState = 1;

dispatcher.register('cb1', function (){
  initialState += 1;
});

dispatcher.register('cb2', function (){
  dispatcher.waitFor(['cb1'], function () {
    console.log(initialState);
    // => 2
  });
});

d.dispatch();