Conditional load redux devServer

Question

I would like to add redux devTools to the store only if the local server is up. Because this is an async operation I end up with an 'incomplete' store.

The async function which checks if the server is there:

export async function isReduxDevServerAlive(url,port, secure = false) {
const server = secure ? 'https' : 'http' + `://${url}:${port}`;
try {
    let response = await fetch(server);
    return true;
} catch(error) {
    return false;
}

The store.js script

import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import { isReduxDevServerAlive } from './util/dev'
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';

import * as reducers from './reducers';
import * as constants from './constants';

let composable = [ applyMiddleware(thunk) ];
const reducer = combineReducers(reducers);

if(isReduxDevServerAlive(constants.REDUX_DEV_SERVER, constants.REDUX_DEV_SERVER_PORT))
{
    composable.push(
        devTools({
            name: 'EPP app', realtime: true,
            hostname: constants.REDUX_DEV_SERVER, port: constants.REDUX_DEV_SERVER_PORT,
            maxAge: 30, filters: {blacklist: ['EFFECT_RESOLVED']}
        })
    );
}

const bconfigureStore = (c) => {
        return createStore(reducer,{},compose(...c));
}

export default function configureStore() {
    return bconfigureStore(composable);
}

The script should wait to export till when it knows if the server is up or down. Could you help me out how to accomplish this?

Well that should work for as long as you hold with final execution of the configureStore() function until you determine if server is up or not. Another thing that springs to mind - maybe use redux dev tools chrome extension instead of dev tools package. — WTK, Jul 16 '16 at 10:47

score 0 · Answer 1 · answered Aug 05 '16 at 09:16

You have just to make your configureStore function asynchronous and apply the render in a callback, for example, as we're doing here.

However, you could just set realtime to false and have an action to start monitoring, specified for startOn parameter (which you dispatch explicitly or if local server is 'up'). In this case you will not have to restart the application in order to start monitoring. The only downside is that redux-devtools-instrument will still store the history, it doesn't affect the performance significantly, but can consume RAM in case you have large objects in the states. We could add the ability to start/stop instrumentation there.

Conditional load redux devServer

1 Answers1