Veams Store Plugin (@veams/plugin-store)

A simple store implementation for Veams by using almost the same naming convention like in Redux.

It is a real simple store to solve basic problems by using:

1. Observer/Store pattern
2. A centralized store
3. A simple data object
4. A simple update method to add or modify data

For larger projects we recommend Redux.

TypeScript is supported.

Installation

NPM

npm install @veams/plugin-store --save

Yarn

yarn add @veams/plugin-store

Usage

import Veams from '@veams/core';
import VeamsStore from '@veams/plugin-store';

// Custom Store 
import rootReducer from './store/reducer';
import INITIAL_STATE from './store/app-state';
import subjects from "./store/subjects";

// Intialize core of Veams
Veams.onInitialize(() => {
   	// Add plugins to the Veams system
	Veams.use(VeamsStore, {
		reducer: rootReducer,
        state: INITIAL_STATE,
        subjects: subjects
	});
});

Let’s take a look at the necessary files reducer, subjects, app-state.

App State Structure (store/app-state.js)

The state is a simple object which contains your store structure. It is your initial state.

export default {
	data: {},
	ui: {
		overlayOpen: false
	}
}

Subject Structure (store/subjects.js)

You decide on which element you want to be able to subscribe by using the Subject() class.

import {Subject} from '@veams/plugin-store';

export default {
	data: new Subject(),
	ui: new Subject()
}

Reducer Structure (store/reducer.js)

Only one reducer is possible. Be sure to broadcast all the changes to the specific observers.

import {state, broadcast} from '@veams/plugin-store';

export default function rootReducer(action, payload) {
	switch (action) {
		case 'DATA_GIPHYS_LOADED_ACTION':
			state.data = handleGiphysLoaded(state.data, payload);
			broadcast('data');
			break;

		case 'DATA_GIPHYS_CLEAR_ACTION':
			state.data = handeGiphysDeleted(state.data);
			broadcast('data');
			break;


		case 'UI_OVERLAY_OPEN_ACTION':
			state.ui = handleOverlayOpen(state.ui, payload);
			broadcast('ui');
			break;

		default:
			return state;
	}
}

Component in Action

The store will be shared as singleton out of the package itself. That’s why you can easily import …

/**
 * Description of ListView.
 *
 * @module ListView
 * @version v0.0.0
 *
 * @author your_name
 */

// Imports
import Component from '@veams/component';
import HttpService from '@veams/http-services';
import { store } from "@veams/plugin-store";


// Services
const giphyService = new HttpService({
	type: 'json',
	url: '/ajax/giphys.json'
});

class ListView extends Component {
	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			overlayOpener: '[data-js-item="list-view-cta"]'
		};
		super(obj, options);
	}

	get events() {
		return {
			'click ': 'showGif'
		}
	}

	/**
	 * Initialize the view
	 *
	 */
	initialize() {
		// Let's select the data object and subscribe to the data subject with this component
		store.select('data').subscribe(this);

        // Now we want to fetch some data from the API ... 
		giphyService
			.get()
			.then(data => {
				// After fetching data, dispatch an action with the response as payload.
				store.dispatch('DATA_GIPHYS_LOADED_ACTION', data);
				
				// Now we want to unsubscribe from the data subject.
				store.select('data').unsubscribe(this);
			});

	}

    // This function is necessary when working with the store. 
    // It provides to you the new data object when store data is changed.
	next(data) {
		if (data.giphys) {
			this.render(data.giphys);
		}
	}

	/**
	 * Render class
	 */
	render(data = {}) {
		this.$el.html(this.renderTemplate('c-list-view-tpl', data));

		return this;
	}

	showGif($evt) {
		// Here we dispatch another action 
		store.dispatch('UI_OVERLAY_OPEN_ACTION', true);
	}
}

export default ListView;