(n.) Something that is the absolute core and driving force behind something.

Simple state management inspired on Redux.

Motivation: I've been using Redux in several projects recently and don't get me wrong, I love it, but I've found that at some point, if my app scales, my Redux files (actions/reducers/store) start to get messy and a bit annoying to handle. So inspired by the basic concepts of Redux, I decided to create this library where I've simplified that workflow and aim to have a better and easier file structure. I hope you like it and any feedback or collaboration is more than welcome.

Install

npm install thrux --save

or with yarn

yarn add thrux

API

Dictionaries

import { register } from 'thrux';

const state = {
    dispatcher: (payload, state)=> console.log('New State', payload), 
    map: rawValue => rawValue.data, 
    error: err => console.err('An error happened', err)
};

register({state});

createDict(dispatcher, map, error)

Create the dictionary of methods that will be used for each action.

Param | Type | Description ----- | ---- | ----------- dispatcher | Function | Update the current state. This could return an Object or a Promise and update the state async. map | Function | (optional) A map function to sanitize the value handle by the dispatcher function. error | Function | (optional) Error handler.

import { createDict } from 'thrux';

const postJson = data => ({
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data),
});

const counter = {
  INCREASE: createDict((payload, state) => state + 1),
  DECREASE: createDict((payload, state) => state - 1),
}

const user = {
  SIGN_IN: createDict(({ username, pass }) =>
      fetch('./sign_in_url', postJson({ username, pass }))
          .then(user => ({ username: user.name, pass: user.password }))),
};

Initialization

You can define an INIT action with a function that sets the initial value of your state after register

import { createDict } from 'thrux';

const counter = {
  INIT    : createDict(() => 1),
  INCREASE: createDict((payload, state) => state + 1),
  DECREASE: createDict((payload, state) => state - 1),
}

init()

Initialize Thrux store.

Param | Type | Description ----- | ---- | ----------- options | Object | Initialize any module: { middlewares: [], dicts: {}, observers: {}, store: {} }

import { init } from 'thrux';
 
init({ store: { test: 0 } });

initState(key)

Triggers INIT action (a.k.a. initialize the state manually)

Param | Type | Description ----- | ---- | ----------- key | String or [Array of Strings] | (optional) State(s) that want to initialize

import { initState } from 'thrux';

initState('counter');
initState(['counter', 'user']);

register(dictionaries)

Register your dictionaries.

Param | Type | Description ----- | ---- | ----------- dictionaries | Object | List of states and their respective dictionaries

import { register } from 'thrux';

register({ counter, user });

dispatch(stateAction, data)

Dispatch the action that will update your state.

Param | Type | Description ----- | ---- | ----------- stateAction | String or [Array of Strings] | String(s) that represents the state(s) and the action(s) that you want to dispatch: 'state:ACTION' data | Any | (optional) Whatever data your dispatcher function is prepared to handle

import { dispatch } from 'thrux';

dispatch('counter:INCREASE');

dispatch(['counter:INCREASE', 'counter2:INCREASE']);

dispatch('user:SIGN_IN', { user:'Thram', pass:'password' });

state(stateKey)

returns: [Object]

Retrieve the state value.

Param | Type | Description ----- | ---- | ----------- stateKey | String or [Array of Strings] | (optional) String(s) that represents the state(s)

import { state } from 'thrux';

const allStates = state();

const someStates = state(['counter','user']);

const userStates = state('user');

observe(stateKey, listener)

Observe when the state changed.

Param | Type | Description ----- | ---- | ----------- stateKey | String | String that represents the state listener | Function | Function that gets trigger when the state changes

import { observe } from 'thrux';

observe('user', (state, actionKey) => console.log(actionKey, state.profile));

Micro Observer

You can observe specific parts of the state for changes

import { observe } from 'thrux';

observe('user.profile', (profile, actionKey) => console.log(actionKey, profile));
observe('user.profile.name', (name, actionKey) => console.log(actionKey, name));

removeObserver(stateKey, listener)

Remove an observe listener.

Param | Type | Description ----- | ---- | ----------- stateKey | String | String that represents the state listener | Function | Function that gets trigger when the state changes

import { observe, removeObserver } from 'thrux';

const logProfile = (auth) => console.log(auth.profile);

observe('user', logProfile);

removeObserver('user', logProfile); // logProfile won't trigger

clearObservers(stateKey)

Remove all observe listeners.

Param | Type | Description ----- | ---- | ----------- stateKey | String or [Array of Strings] | String that represents the state

import { clearObservers } from 'thrux';

clearObservers('user');
clearObservers(['counter1', 'counter2']);

addMiddleware(middleware)

Add some middleware function. It won't modified the state.

Param | Type | Description ----- | ---- | ----------- middleware | Function or [Array of Functions] | Function(s) that trigger when the state changes with the following params: {state, action, prev, payload, next}

import { addMiddleware } from 'thrux';

// Add logger
addMiddleware(({ state, action, prev, payload, next }) => console.log({ state, action, prev, payload, next }));
addMiddleware([({ prev }) => console.log('prev', prev), ({ next }) => console.log('next', next)]);

getActions(stateKeys)

Retrieve the state(s) actions keys.

Param | Type | Description ----- | ---- | ----------- stateKey | String or [Array of Strings] | (optional) String(s) that represents the state(s)

import { getActions } from 'thrux';

const actions = getActions('user'); // ['user:INIT', 'user:SIGN_IN']

Clear()

Clear Thrux store.

import { clear } from 'thrux';
 
init({ store: { test: 0 } }); // { test:0 }
clear(); // { }

reset()

Reset Thrux all your modules to your initial values.

import { init, register, reset } from 'thrux';
 
init({ store: { test: 0 } }); // { test:0 }
register({ counter }); // { test:0, counter: 0 }
reset(); // { test:0 }

Examples

• Counter
• Todo

Thanks!