Redux devtools stopped working: upgrading dexuv-devtools-extension

The Redux Devtools Chrome plugin stopped working for me, possibly after a Chrome update. I removed and re-installed the plugin and it still wasn’t working. It was opening up ok but not picking up any of my Redux actions or state changes.

Checking the docs, it seems there’s been a name change with how you integrate the devtools into you app too. Since I’m adding the thunk middleware I need to use the compose approach. Before updating and before this naming change, I was using this approach, described in a previous post here:

import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from '../reducers/reducer';

let store = createStore(rootReducer, compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

New approach with updates react-devtools and the extension:

import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from '../reducers/reducer';

const store = createStore(
    rootReducer,
    composeWithDevTools(
      applyMiddleware(thunk)
      // other store enhancers if any
    )
  );

Take time to learn the basics

With the abundance of online tutorials, YouTube videos and everything else that’s easily available online, it’s never been easier to get started in software development. However, take time to learn the basics. Everything in tech is built upon something else. No, you don’t need to know or understand how everything works down to the bare metal, but if you’re getting starting building web apps, it does help to learn some basics like how to submit an HTML form.

[Top tip series: rather than spending time writing lengthy articles over several days I’m going to try and post shorter, hopefully useful tips more frequently]

Re-writing previous git commits to change committer author/email

If you’ve committed a number of git commits using a wrong user.name or user.email value, you can re-write previous commits with:

git filter-branch --commit-filter '
        if [ "$GIT_COMMITTER_NAME" = "Old Name" ];
        then
                GIT_COMMITTER_NAME="new-name";
                GIT_AUTHOR_NAME="new-name";
                GIT_COMMITTER_EMAIL="new-email";
                GIT_AUTHOR_EMAIL="new-email";
                git commit-tree "$@";
        else
                git commit-tree "$@";
        fi' HEAD

Note that this will re-write all commits on the current branch matching the if condition which may or may not be what you’re looking for, so be careful. push the changes back to your remote origin as needed.

This is based on answers to this question here.

React app running locally failing with opensslErrorStack ERR_OSSL_EVP_UNSUPPORTED

I just started getting this error starting up my React app locally with ‘npm run start’ :

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

I recently installed nvm on my Mac to avoid needing sudo for running a ‘npm i -g’, and also apparently picked up the latest stable node version and not lts.

Running ‘nvm ls’ to see what version I have and what’s available:

> nvm ls
->      v17.3.0
         system
default -> node (-> v17.3.0)

According to https://nodejs.org/en/download/current/ 17.3.0 is the latest current and not lts. Answers to this related question suggested switching back to lts to avoid this change.

Following the nvm docs :

nvm install -lts
nvm use --lts

Now I’ve back at version 16.13.1, and my React app with ‘npm run start’ now starts as expected.