Install and configure Redux Toolkit

[lindapaiste]

This is step 1 of issues #2042 and #2186

Implements the recommended first step in the Migrating to Modern Redux guide

Replace the existing manual Redux store setup with Redux Toolkit's configureStore

Changes:

• Install package @reduxjs/toolkit.
• Rewrite store setup using configureStore.
• Update redux and @redux-devtools packages to their latest versions to resolve a warning:

Symbol.observable as defined by Redux and Redux DevTools do not match. This could cause your app to behave differently if the DevTools are not loaded. Consider polyfilling Symbol.observable before Redux is imported or avoid polyfilling Symbol.observable altogether.

• Allow RTK to handle syncing the store with the browser DevTools extension, and only use the DockMonitor if the browser extension is not installed. Using both causes problems.
• Change checks of deprecated window.devToolsExtension to current window.__REDUX_DEVTOOLS_EXTENSION__.
• Remove reselect as a top-level dependency because it is bundled with RTK.
• Change imports of createSelector from reselect to @reduxjs/toolkit.
• Create an instance of listenerMiddleware and link it to the store. This is just a tool which can be used in future PRs and does not do anything right now.

Note: redux-thunk is also bundled with RTK, but it needs to stay as dependency because is used directly in some test files.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

Questions:

• I kept the hot module replacement code in the store setup but I don't know if it's actually needed. HMR has never worked for me so I cannot test it out. This answer from 2016 shows the exact setup that we have, but the answers from 2019 and 2020 say it's not needed.
• I don't understand the use of window.__INITIAL_STATE__ in our index.jsx. It seems like it's used as a way to pass state from the backend to the frontend, but I don't see anywhere in the server part where we are setting this property.
• Now that we have support for the Redux DevTools browser extension, which happens automatically with configureStore, I'm not sure if we really need the manual setup of the DockMonitor on top of that?

Here's what it looks like in Edge, where I have no browser Redux DevTools, and the DockMonitor is shown:

In Chrome, the DockMonitor won't show up on top of the web app anymore but the browser Redux DevTools work! Those tools show the Log but also a bunch of other stuff.

[PiyushChandra17]

Nicely Done 👍

[raclim]

Hey! Just wanted to ask here since this PR should definitely get in before the end of the year 😅 if you're okay with having your PR edited by others (like in the case of merge conflicts), of if you'd prefer to handle them yourself! (I'm not sure if there's an etiquette for this?)

[lindapaiste]

Hey! Just wanted to ask here since this PR should definitely get in before the end of the year 😅 if you're okay with having your PR edited by others (like in the case of merge conflicts), of if you'd prefer to handle them yourself! (I'm not sure if there's an etiquette for this?)

Hey I'm fine with you doing it if you understand the conflicts. Like I definitely don't care if you regenerate a package-lock.json file. There may be cases where it makes sense for me to do it if the conflicts are more complicated.

I'm looking at this now though and hopefully I can resolve this one.

Sometimes I have problems when I go to merge in the develop branch because the merge commit won't go through if it fails any tests. My process in that case is:

• Remove "pre-commit": "lint-staged" from the husky section of package.json file (but don't commit this).
• Merge in upstream/develop.
• Fix issues so that it passes all tests and commit those changes (usually as an amend to the merge commit).
• Push.

[raclim]

Thanks for working through the conflicts! I'm going to quickly merge this in now then while it's good.