[SEEDUX]

React-Redux Developer Tool for the Chrome Browser

Features

  • Time travel functionality for your Redux store.
  • Persistent log of every action dispatched, resulting store diffs, and complete new store.
  • Configurable visualization of actionCreators, reducers, and ui props if using react-redux.
  • Illumination of relevant actionsCreators and reducers upon action dispatch.
  • Settings menu to customize view.
  • Ability to dispatch actions with custom payloads
  • Import/Export and Stash/Unstash complete store logs from disk or localStorage, respectively.
Viz Screenshot Log Screenshot

How to Install

Seedux can be easily installed as a developer dependency with npm using your favorite terminal.

npm install seedux --save-dev

Development Version

For a codebase suitable for modification, clone our git repository to an easily accessible file path on your computer and run the build:

cd seedux_repo_path
npm install
npm run build:both

Getting Started

Import combineReducers, connect, and bindActionCreators from Seedux, rather than Redux/React-Redux. The examples below assume you are working with the npm module. If you are working from the git repo, replace 'seedux' with your repo path!

// import { combineReducers } from 'redux';
import { combineReducers } from 'seedux';
// import { connect } from 'react-redux';
import { connect } from 'seedux';

Note: Seedux relies on bindActionCreators to parse your action types at runtime and provide visual feedback on dispatched actions. If you are not using bindActionCreators, you can pass your actions directly to seeduxInit instead.

// import { bindActionCreators } from 'redux';
import { bindActionCreators } from 'seedux';

Import dispatchLogger from Seedux and apply it as middleware when invoking createStore.

Import and call seeduxInit. Pass seeduxInit your newly created store (and actionCreators if not using bindActionCreators).

import { dispatchLogger, seeduxInit } from 'seedux';
import * as actionCreators from './actions';

const store = createStore(combinedReducers, preloadedState, applyMiddleware(dispatchLogger));
seeduxInit(store, actionCreators);

Navigate to chrome://extensions

Click 'load as an unpacked extension' and select seedux_repo_path + 'seedux/seeduxChrome'

Open your redux app in the browser.

Click on the seeduxChrome extension icon to launch the dev tool!