raj icon indicating copy to clipboard operation
raj copied to clipboard

Redux DevTools support (via HOP)

Open mindplay-dk opened this issue 4 years ago • 0 comments

I've successfully connected Raj to the Redux DevTools extension for Chrome.

function connectDevToolsTo(program) {
    const extension = window.__REDUX_DEVTOOLS_EXTENSION__;

    if (!extension) {
        console.error("Redux DevTools not available.");
        return program;
    }

    const devTools = extension.connect();
    
    const setState = {};
    
    const [state, effect] = program.init;

    return {
        ...program,
        init: [state, dispatch => {
            devTools.init(state);

            devTools.subscribe((message) => {
                if (message.type === 'DISPATCH' && message.state) {
                    dispatch({ type: setState, state: JSON.parse(message.state) });
                }
            });   

            if (effect) {
                effect(dispatch);
            }
        }],
        update: (message, state) => {
            if (message.type === setState) {
                return [message.state];
            } else {
                const change = program.update(message, state);
                devTools.send(message, change[0]);
                return change;
            }
        }
    };
}

I know you have your own dedicated devtool for Raj, but this extension is pretty rad - what with the time-travel feature and all, which works with this little HOP attached. All the cool kids are using it ;-)

mindplay-dk avatar Sep 02 '19 11:09 mindplay-dk