Dispatch your actions manually to test if your app reacts well.
npm install --save-dev redux-devtools-dispatch
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!
| 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. |
As this package is my first, any comment, pull request, issue is welcome so I can learn more from everyone.
MIT