neher-flux

Flux Store

Most basic implementation of flux architecture

Usage

Download the createStore.js from the src directory and import it into your project.

Creating your store

/**
 * TodoStore.js
 */

import createStore from './createStore'

let store = createStore({

	state: [],

	reducer(state = [], action) {
		switch(action.type) {
			case 'ADD_TODO':
				return [
					...state,
					{
						id: action.id,
						text: action.text
					}
				]
			default:
				return state
		}
	}		
	
});

export default store

Using your store

/**
 * SomeComponent.js
 */

import TodoStore from './TodoStore';

// An example local state
let myState = {
	todos: []
}

// Subscribe to any state changes
TodoStore.subscribe(todos => {
	myState.todos = todos
})

// You can also subscribe to specific actions
TodoStore.subscribe('ADD_TODO', todos => {
	myState.todos = todos
})

// Dispatching actions
TodoStore.dispatch({ type: 'ADD_TODO', id: 1, text: 'Hello, Flux!' })

// Unsubscribing from changes
// Right now only works if you pass the same 
// function reference to the subscribe method (not a closure)
TodoStore.unsubscribe(myCallbackFunction())

// Can also unsubscribe from specific actions 
// (only usable if you subscribed to the specific action)
TodoStore.unsubscribe('ADD_TODO', myCallbackFunction())

// If you just want to get the state
myState.todos = TodoStore.getState()