example: migrate `redux` to ESM (#4158)

Co-authored-by: Murderlon <merlijn@soverin.net>

.eslintrc.js

@@ -201,6 +201,7 @@ module.exports = {
         'examples/php-xhr/*.js',
         'examples/python-xhr/*.js',
         'examples/react-example/*.js',
+        'examples/redux/*.js',
         'examples/transloadit/*.js',
         'examples/transloadit-markdown-bin/*.js',
         'examples/xhr-bundle/*.js',

examples/redux/.gitignore

@@ -1 +0,0 @@
-uppy.min.css

examples/redux/readme.md → examples/redux/README.md

@@ -10,15 +10,15 @@ This example supports the [Redux Devtools extension](https://github.com/zalmoxis
 
 To run this example, make sure you've correctly installed the **repository root**:
 
-```bash
-npm install
-npm run build
+```sh
+corepack yarn install
+corepack yarn build
 ```
 
 That will also install the dependencies for this example.
 
 Then, again in the **repository root**, start this example by doing:
 
-```bash
-npm run example redux
+```sh
+corepack yarn workspace @uppy-example/redux start
 ```

examples/redux/index.html

@@ -21,7 +21,7 @@
       <div id="uppy"></div>
     </main>
 
-    <link href="uppy.min.css" rel="stylesheet">
-    <script src="bundle.js"></script>
+    <noscript>This app requires JavaScript.</noscript>
+    <script src="./main.js" type="module"></script>
   </body>
 </html>

examples/redux/main.js

@@ -1,9 +1,14 @@
-const { createStore, compose, combineReducers, applyMiddleware } = require('redux')
-const logger = require('redux-logger').default
-const Uppy = require('@uppy/core')
-const uppyReduxStore = require('@uppy/store-redux')
-const Dashboard = require('@uppy/dashboard')
-const Tus = require('@uppy/tus')
+import { compose, combineReducers, applyMiddleware } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
+import logger from 'redux-logger'
+import Uppy from '@uppy/core'
+import ReduxStore from '@uppy/store-redux'
+import * as uppyReduxStore from '@uppy/store-redux'
+import Dashboard from '@uppy/dashboard'
+import Tus from '@uppy/tus'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
 
 function counter (state = 0, action) {
   switch (action.type) {
@@ -32,7 +37,16 @@ if (typeof __REDUX_DEVTOOLS_EXTENSION__ !== 'undefined') {
   enhancer = compose(enhancer, __REDUX_DEVTOOLS_EXTENSION__())
 }
 
-const store = createStore(reducer, enhancer)
+const store = configureStore({
+  reducer,
+  enhancers: [enhancer],
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+    serializableCheck: {
+      ignoredActions: [uppyReduxStore.STATE_UPDATE],
+      ignoreState: true,
+    },
+  }),
+})
 
 // Counter example from https://github.com/reactjs/redux/blob/master/examples/counter-vanilla/index.html
 const valueEl = document.querySelector('#value')
@@ -62,11 +76,11 @@ document.querySelector('#incrementAsync').onclick = () => {
 // Uppy using the same store
 const uppy = new Uppy({
   id: 'redux',
-  store: uppyReduxStore({ store }),
+  store: new ReduxStore({ store }),
   // If we had placed our `reducer` elsewhere in Redux, eg. under an `uppy` key in the state for a profile page,
   // we'd do something like:
   //
-  // store: uppyReduxStore({
+  // store: new ReduxStore({
   //   store: store,
   //   id: 'avatar',
   //   selector: state => state.pages.profile.uppy
@@ -78,6 +92,4 @@ uppy.use(Dashboard, {
   inline: true,
   width: 400,
 })
-uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/' })
-
-window.uppy = uppy
+uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })

examples/redux/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@uppy-example/redux",
   "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.4.4",
+    "@reduxjs/toolkit": "^1.9.3",
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
     "@uppy/store-redux": "workspace:*",
     "@uppy/tus": "workspace:*",
-    "babelify": "^10.0.0",
-    "budo": "^11.6.1",
-    "redux": "^4.1.2",
+    "redux": "^4.2.1",
     "redux-logger": "^3.0.6"
   },
+  "devDependencies": {
+    "vite": "^4.0.0"
+  },
   "private": true,
   "scripts": {
-    "css": "cp ../../packages/uppy/dist/uppy.min.css .",
-    "start": "yarn run css && budo main.js:bundle.js -- -t babelify"
+    "start": "vite"
   }
 }