yorunohikage / redux-devtools-dispatch

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

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.

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

redux-devtools-dispatch's Issues

Request for better error messages/check action's structure

Hello! I was puzzled for a while because I formatted my action poorly like so:

{
type: "ADD_GROUP_TO_PROJECT",
payload: {
  projectId: "24763583",
  id: "2476358367294e4"
}

I didn't have the closing curly brace.

However the error message returned was "Unexpected token )" which confused me for an embarassingly long time before I managed to figure this out.

I just thought it would be a good idea to add something make sure the structure is valid, as I believe this error message is from accepting the action 'as is' and then bumping into some other code where it errors out.

Thanks!

Theme support

Inline with how redux-devtools-log-monitor does it (at least redux-devtools-themes).

Not a game-breaker, of course, just a wish.

Action function in dispatch list has weird syntax if arrow functions are used.

The following action works perfectly:

function actionCreator(count: number): ActionType {
 return {
    type: types.ActionType,
    count
 };
}

but if rewritten like this:

const actionCreator = (count: number): ActionType => ({
  type: types.ActionType,
  count
});

it produces junk in the devtools dispatcher list. The action that appears looks like this:
actionCreator({, type:, _types2.default.ActionType, stories, })

Integrate with redux-actions

My actionCreator use redux-actions.
When I inject action creators, I display anonymous function in UI.
Is there any way to solve this problem?

//ActionCreator.js
import { createAction } from 'redux-actions';
export const increment = createAction('INCREMENT');
export const decrement = createAction('DECREMENT');

Support for action creators

Hi, I really like this tool and it speeds up the development process. Would be also cool to directly call actionCreators http://rackt.org/redux/docs/basics/Actions.html#action-creators from the debug-window.

The usage of actionCreators would required the developer to pass over all the actionCreators as a prop, but i am wondering if it would make sense to combine both (the pure actions and the actionCreators) within one debug-tool, or if it would make sense to create a second devtool-dispatcher for actionCreators. What is your opinion on that? I would appreciate an answer.

Make MultipleMonitors official

Why do you consider it hacky? Would you consider publishing it as a separate package?
And please feel free to submit a PR to Redux DevTools README with the gif!