Redux DevTools Dispatch

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

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.

1import React from 'react';
2import { createDevTools } from 'redux-devtools';
3import Dispatcher from 'redux-devtools-dispatch';
4
5export default createDevTools(
6  <Dispatcher />
7);

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

1import React from 'react';
2import { createDevTools } from 'redux-devtools';
3import Dispatcher from 'redux-devtools-dispatch';
4
5const actionCreators = {
6  increment() {
7    return {type: 'INCREMENT_COUNTER'};
8  },
9  decrement() {
10    return {type: 'DECREMENT_COUNTER'};
11  },
12  nested: {
13    worksToo() {
14      return {type: 'NESTED_WORKS_TOO', cool: true};
15    },
16  },
17};
18
19export default createDevTools(
20  <Dispatcher actionCreators={actionCreators} />
21);

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

1import React from 'react';
2
3import { createDevTools } from 'redux-devtools';
4import LogMonitor from 'redux-devtools-log-monitor';
5import DockMonitor from 'redux-devtools-dock-monitor';
6import Dispatcher from 'redux-devtools-dispatch';
7import MultipleMonitors from 'redux-devtools-multiple-monitors';
8
9export default createDevTools(
10  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
11    <MultipleMonitors>
12      <LogMonitor />
13      <Dispatcher />
14    </MultipleMonitors>
15  </DockMonitor>
16);

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