Redux DevTools remotely.
Read the post for details about why and how to use them.
composeWithDevtools
methodInstead of
import { createStore, applyMiddleware, compose } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, /* preloadedState, */ compose(
applyMiddleware(...middleware),
devToolsEnhancer()
));
Now you should use:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';
const store = createStore(reducer, /* preloadedState, */ composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
or with parameters:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';
const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
const store = composeWithDevTools(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers if any
));
As the result DevTools.updateStore
is deprecated.
false
, it will not record the changes till clicking on Start recording
button. Default is true
.Pause recording
button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Default is @@PAUSED
.true
, it will not allow any non-monitor actions to be dispatched till clicking on Unlock changes
button. Default is false
.false
, will not recompute the states on hot reloading (or on replacing the reducers). Default to true
.stateSanitizer
- function which takes state object and index as arguments, and should return state object back.actionSanitizer
- function which takes action object and id number as arguments, and should return action object back.Example of usage:
export default function configureStore(initialState) {
// Note: passing enhancer as last argument requires redux@>=3.1.0
const store = createStore(
rootReducer,
initialState,
devTools({
actionSanitizer: (action) => (
action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
{ ...action, data: '<<LONG_BLOB>>' } : action
),
stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
})
);
return store;
}
socketcluster-client
to fix Windows issues.Added updateStore
method, which you can use in case you have other enhancer / middlewares. So, when remote dispatching, they will be applied.
Usage:
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';
export default function configureStore(initialState) {
const enhancer = compose(
applyMiddleware(thunk),
devTools()
);
// Note: passing enhancer as last argument requires redux@>=3.1.0
const store = createStore(reducer, initialState, enhancer);
// If you have other enhancers & middlewares
// update the store after creating / changing to allow devTools to use them
devTools.updateStore(store);
return store;
}
Use the latest remotedev-app
to get it work.
Added sendOnError
parameter, which can be set to:
1
: catch all exceptions from the application by binding to console.error
, using window.onerror
for browser and ErrorUtils
for React Native, and send a @@remotedev/ERROR
action with all the details.2
: catch only exceptions from reducers.Will send logs even when realtime is set to false
, but with post requests in this case without opening a connection.
Fixes:
The configuration will be like:
export default function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
devTools({
name: 'Android app', realtime: false,
hostname: 'your-host.com', port: 8000,
sendOn: 'SOME_ACTION_ERROR' // or array: ['LOGIN_ERROR', 'LOGOUT_ERROR']
})
);
}
Requires remotedev-server@^0.0.9
.
Added secure
parameter, specifies whether to use https
protocol for post requests and wss
for socket connections. Requires remotedev-server@^0.0.8
.