thrux v3.2.2

(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.

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.

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

initState(key)

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

import { initState } from 'thrux';

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

register(dictionaries)

Register your dictionaries.

import { register } from 'thrux';

register({ counter, user });

dispatch(stateAction, data)

Dispatch the action that will update your state.

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.

import { state } from 'thrux';

const allStates = state();

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

const userStates = state('user');

observe(stateKey, listener)

Observe when the state changed.

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.

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.

import { clearObservers } from 'thrux';

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

addMiddleware(middleware)

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

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.

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!