From 15a9fba0912ef4d4f6996e5f3549e49e529cf14a Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 1 Nov 2022 12:52:27 +0100 Subject: [PATCH] Migrated redux store creation to redux toolkit --- package-lock.json | 49 +++++++++++++++++++++++++++++++++++++++--- package.json | 1 + src/container/store.ts | 19 ++++++++-------- 3 files changed, 57 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index f24f90ed..b0eafdcd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@fortawesome/free-regular-svg-icons": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^6.2.0", "@fortawesome/react-fontawesome": "^0.2.0", + "@reduxjs/toolkit": "^1.8.6", "axios": "^1.1.2", "bootstrap": "^5.2.2", "bottlejs": "^2.0.1", @@ -4267,6 +4268,29 @@ "react-dom": "^18.0.0" } }, + "node_modules/@reduxjs/toolkit": { + "version": "1.8.6", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz", + "integrity": "sha512-4Ia/Loc6WLmdSOzi7k5ff7dLK8CgG2b8aqpLsCAJhazAzGdp//YBUSaj0ceW6a3kDBDNRrq5CRwyCS0wBiL1ig==", + "dependencies": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@remix-run/router": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.1.tgz", @@ -12146,7 +12170,6 @@ "version": "9.0.12", "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==", - "dev": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/immer" @@ -22895,6 +22918,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "node_modules/reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "node_modules/resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", @@ -29896,6 +29924,17 @@ "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", "requires": {} }, + "@reduxjs/toolkit": { + "version": "1.8.6", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz", + "integrity": "sha512-4Ia/Loc6WLmdSOzi7k5ff7dLK8CgG2b8aqpLsCAJhazAzGdp//YBUSaj0ceW6a3kDBDNRrq5CRwyCS0wBiL1ig==", + "requires": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + } + }, "@remix-run/router": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.1.tgz", @@ -35856,8 +35895,7 @@ "immer": { "version": "9.0.12", "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", - "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==", - "dev": true + "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==" }, "immutable": { "version": "4.0.0", @@ -43789,6 +43827,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", diff --git a/package.json b/package.json index cb026101..549b0d11 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@fortawesome/free-regular-svg-icons": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^6.2.0", "@fortawesome/react-fontawesome": "^0.2.0", + "@reduxjs/toolkit": "^1.8.6", "axios": "^1.1.2", "bootstrap": "^5.2.2", "bottlejs": "^2.0.1", diff --git a/src/container/store.ts b/src/container/store.ts index f4c80820..569db995 100644 --- a/src/container/store.ts +++ b/src/container/store.ts @@ -1,14 +1,10 @@ -import ReduxThunk from 'redux-thunk'; -import { applyMiddleware, compose, createStore } from 'redux'; import { save, load, RLSOptions } from 'redux-localstorage-simple'; -import reducers from '../reducers'; +import { configureStore } from '@reduxjs/toolkit'; +import reducer from '../reducers'; import { migrateDeprecatedSettings } from '../settings/helpers'; import { ShlinkState } from './types'; const isProduction = process.env.NODE_ENV === 'production'; -// eslint-disable-next-line no-mixed-operators -const composeEnhancers: Function = !isProduction && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; - const localStorageConfig: RLSOptions = { states: ['settings', 'servers'], namespace: 'shlink', @@ -17,6 +13,11 @@ const localStorageConfig: RLSOptions = { }; const preloadedState = migrateDeprecatedSettings(load(localStorageConfig) as ShlinkState); -export const store = createStore(reducers, preloadedState, composeEnhancers( - applyMiddleware(save(localStorageConfig), ReduxThunk), -)); +export const store = configureStore({ + devTools: !isProduction, + reducer, + preloadedState, + middleware: (defaultMiddlewaresIncludingReduxThunk) => defaultMiddlewaresIncludingReduxThunk( + { immutableCheck: false, serializableCheck: false }, // State is too big for these + ).concat(save(localStorageConfig)), +});