[Feature] Update Redux, Add Devtools

[hydrosquall]

Redux Devtools gives us more granular views into the state of the redux store than console logs.

We will also get a minor performance boost from upgrading to the current version of react-redux (7), released last month.

This PR sits on top of commits from #86 and #87.

Preview deploy:

• https://5cd79be30cc3fd0007625683--blockbuilder-search-hydrosquall.netlify.com/

[micahstubbs]

nice thinking, redux devtools are great.

could you ensure that this one is either

1. standalone, only redux devtools changes
2. or only depends on [dependencies] Update to React 16, Webpack 4, Babel 7 #88

?

[micahstubbs]

@hydrosquall curious, what is your reasoning for including redux logger too? I usually only use redux-devtools, and look at it's actions feed for the information that I got from redux logger before. 🤔

[hydrosquall]

Hm, good question. Initially it was just something I'd reflexively included because the early projects I followed used it. Later on, I've found it useful to have some form of Redux introspection capabilities when debugging cross-browser issues in browsers without Redux devtools like IE / Safari. I'm not strongly attached to it though, and happy to drop it from the PR if it unnecessarily complicates things.

[micahstubbs]

ah, good to understand. let's add just Redux Devtools with this PR (drop redux-logger for now). Once we have that and we get #88 in, this one should be good to go.

and yes, committing our bundle does introduce a little more dev friction. thanks for bearing with it!

[hydrosquall]

I'll wait to rebase this PR until #88 goes through, to avoid repeat rounds of regenerating the bundle.js / yarn.lock files.

[hydrosquall]

I dropped the commit with redux-logger, I will wait on recommitting the bundle.js until #88 is merged.

[micahstubbs]

@hydrosquall here's a PR into your branch to resolve the merge conflicts hydrosquall#2

[micahstubbs]

@hydrosquall ok, let's do this one next. sent a PR and added some comments. progress!

[hydrosquall]

I rebased the branch so that the git history is clean, and ensured that the dependency upgrades (redux, react-redux, and redux-thunk) were all made relative to the yarn.lock of the current master branch. This is ready to recheck :).

[micahstubbs]

nice, thanks for rebasing and fixing the conflicts! will take another look.

[micahstubbs]

ok, diff looks good, but I see an error when I test this locally

[hydrosquall]

Meaning the Redux or google line error? The google analytics line seems unrelated to the redux, and the search error for hits looks like what might happen if perhaps the elasticsearch endpoint was unavailable.

…

On Fri, May 24, 2019 at 10:30 PM Micah Stubbs ***@***.***> wrote: ok, diff looks good, but I see an error when I test this locally [image: Screen Shot 2019-05-24 at 7 29 24 PM] <https://user-images.githubusercontent.com/2119400/58363524-4ddd0e80-7e5a-11e9-8f47-500d3b598381.png> — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#89?email_source=notifications&email_token=ACE2MM2B3DK4RY56YKYRTQLPXCQENA5CNFSM4HMJQZEKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWG4CVY#issuecomment-495829335>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACE2MMZB7QPZE4XMSW6KPW3PXCQENANCNFSM4HMJQZEA> .

[micahstubbs]

ah, nevermind I know why this is. let me try on the other machine that has the secrets.json configured to use the remote production search backend 💡

[micahstubbs]

@hydrosquall as you might have noticed, this config in secrets.json is a pain point with our current dev setup 😅

[micahstubbs]

progress. now that I add the secrets.json config to use the remote search backend, I see the search results render

[micahstubbs]

that said, redux-devtool doesn't see a store. instead, it points us to this help link https://github.com/zalmoxisus/redux-devtools-extension#usage

[micahstubbs]

going to update my redux-devtools Chrome extension and see if that makes a difference https://github.com/zalmoxisus/redux-devtools-extension#installation

[micahstubbs]

ok, updating to https://github.com/zalmoxisus/redux-devtools-extension/releases/tag/2.17.0 did not fix it. must be something else 🤔

[micahstubbs]

I think I found the problem. webpack is defaulting to production mode

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

[micahstubbs]

we can set the mode to development in the yarn scripts in package.json

for example:

"buildWatch": "webpack --color --progress --watch --mode=development",

[micahstubbs]

going to pause here, and come back to this later. so weird that Redux devtools don't see the store.

[hydrosquall]

Hm, Redux Devtools will work in both development and production mode, I just rechecked using the "docker compose" local setup in development mode.

And then there's the deployed code in production mode, just to confirm that everything is OK with the devtools extension.

Is it possible that we might be loading a cached version of the page, where the old code didn't use the alternate compose function? One way I check this sometimes is going to the "sources" tab, hitting "ctrl+p", and checking the file of interest (in this case, store.js to ensure we're using the new compose function.)

[micahstubbs]

hah! @hydrosquall we should get you setup with the same local dev environment (pre-docker) so that we can compare with all other things equal.

I'll DM you the secrets.json file that you need for local dev with a remote search backend for now.

[micahstubbs]

I'm definitely seeing the old store.js. odd. In Chrome devtools, I went to Applications --> Clear Site Data. thought that would do it. I also have Network --> disable cache checked. 🤔

[micahstubbs]

fixed it 💡

cd blockbuilder
yarn link blockbuilder-search
yarn build
node server.js

somehow my yarn link had gone stale. weird.

[micahstubbs]

just discovered this unrelated issue #94

[micahstubbs]

looks good, thanks for the contribution!