Skip to content

Dispatch your actions manually to test if your app reacts well.

License

Notifications You must be signed in to change notification settings

YoruNoHikage/redux-devtools-dispatch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Redux DevTools Dispatch

Dispatch your actions manually to test if your app reacts well.

npm version

redux-devtools-dispatch

Installation

npm install --save-dev redux-devtools-dispatch

Usage

You can declare your Dispatcher the same way you declare a Monitor in your Dev Tools.

import React from 'react';
import { createDevTools } from 'redux-devtools';
import Dispatcher from 'redux-devtools-dispatch';

export default createDevTools(
  <Dispatcher />
);

You can inject action creators to ease the process of testing your app firing yourself actions.

import React from 'react';
import { createDevTools } from 'redux-devtools';
import Dispatcher from 'redux-devtools-dispatch';

const actionCreators = {
  increment() {
    return {type: 'INCREMENT_COUNTER'};
  },
  decrement() {
    return {type: 'DECREMENT_COUNTER'};
  },
  nested: {
    worksToo() {
      return {type: 'NESTED_WORKS_TOO', cool: true};
    },
  },
};

export default createDevTools(
  <Dispatcher actionCreators={actionCreators} />
);

You can also use <MultipleMonitors> from redux-devtools-multiple-monitors to use multiple monitors into the <DockMonitor>:

import React from 'react';

import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
import Dispatcher from 'redux-devtools-dispatch';
import MultipleMonitors from 'redux-devtools-multiple-monitors';

export default createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
    <MultipleMonitors>
      <LogMonitor />
      <Dispatcher />
    </MultipleMonitors>
  </DockMonitor>
);

Then, just write an JSON action in the field, click on Dispatch, and that's all!

Props

Name Description
theme Same as in LogMonitor's package Either a string referring to one of the themes provided by redux-devtools-themes (feel free to contribute!) or a custom object of the same format. Optional. By default, set to 'nicinabox'.
initEmpty When true, the dispatcher is empty. By default, set to false, the dispatcher contains : { "type": "" }.
actionCreators Either a array of action creators or an object containing action creators. When defined, a selector appears to choose the action creator you want to fire, you can fill up the arguments and dispatch the action.
dispatchFn Function to be called for dispatching actions. By default it is using component's this.context.store.dispatch.

Contributing

As this package is my first, any comment, pull request, issue is welcome so I can learn more from everyone.

License

MIT