Almin-devtools NPM

almin-devtools

Integrate almin into Redux DevTools Extension.

ScreenShot

Features

Lets you inspect every state and UseCase/dispatch
See diff of the state
Import/Export log

Installation

Install Redux DevTools Extension to browser
Install almin-devtools via npm
Connect almin to Redux DevTools Extension

Installation of DevTools extension

1. For Chrome

from Chrome Web Store;

2. For Firefox

from Mozilla Add-ons;

3. For Electron

just specify REDUX_DEVTOOLS in electron-devtools-installer.

4. For other browsers and non-browser environment

use remote-redux-devtools.

Installation of almin-devtools

Install with npm:

npm install almin-devtools

Usage

Connect from your application to redux-devtools.

import { Context, Dispatcher, StoreGroup } from "almin";
import AlminDevTools from "almin-devtools"
import { CounterStore } from "../store/CounterStore";
const dispatcher = new Dispatcher();
const store = new StoreGroup([new CounterStore()]);
const appContext = new Context({
    dispatcher,
    store
});
// initialize devTools
const devTools = new AlminDevTools(appContext);
devTools.connect(); // connect to redux-devtools
/* customize redux-devtools options
devTools.connect({
    features: {
        pause: true, // start/pause recording of dispatched actions
        lock: true, // lock/unlock dispatching actions and side effects
        persist: false, // persist states on page reloading
        export: true, // export history of actions in a file
        import: 'almin-log', // import history of actions from a file
        jump: false, // jump back and forth (time travelling)
        skip: false, // skip (cancel) actions
        reorder: false, // drag and drop actions in the history list
        dispatch: false, // dispatch custom actions or action creators
        test: true // generate tests for the selected actions
    }
});
*/
devTools.init(appContext.getState()); // record initial state

See Methods (advanced API) · Redux DevTools Extension for more details.