storage middleware wip, add optimization comment

src/logic/tokens/store/actions/addToken.js

@@ -3,7 +3,7 @@ import { createAction } from 'redux-actions'
 import { type Token } from '~/logic/tokens/store/model/token'
 import { setActiveTokens, getActiveTokens, setToken } from '~/logic/tokens/utils/tokensStorage'
 import type { Dispatch as ReduxDispatch } from 'redux'
-import { type GlobalState } from '~/store/index'
+import { type GlobalState } from '~/store/'
 
 export const ADD_TOKEN = 'ADD_TOKEN'
 

src/routes/safe/component/Balances/Tokens/index.jsx

@@ -25,7 +25,7 @@ import Spacer from '~/components/Spacer'
 import Row from '~/components/layout/Row'
 import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
 import { type Token } from '~/logic/tokens/store/model/token'
-import { type SafeToken } from '~/routes/safe/store/models/safeToken'
+import { type TokenBalance } from '~/routes/safe/store/models/tokenBalance'
 import actions, { type Actions } from './actions'
 import TokenPlaceholder from './assets/token_placeholder.png'
 import { styles } from './style'
@@ -48,6 +48,11 @@ const filterBy = (filter: string, tokens: List<Token>): List<Token> => tokens.fi
       || token.name.toLowerCase().includes(filter.toLowerCase()),
 )
 
+// OPTIMIZATION IDEA (Thanks Andre)
+// Calculate active tokens on component mount, store it in component state
+// After user closes modal, dispatch an action so we dont have 100500 actions
+// And selectors dont recalculate
+
 class Tokens extends React.Component<Props, State> {
   state = {
     filter: '',

src/routes/safe/store/middleware/safeStorage.js

@@ -0,0 +1,21 @@
+// @flow
+import { ADD_SAFE } from '~/routes/safe/store/actions/addSafe'
+import { UPDATE_SAFE } from '~/routes/safe/store/actions/updateSafe'
+import { saveToStorage } from '~/utils/storage'
+import { SAFES_KEY } from '~/logic/safe/utils'
+import type { GetState } from 'redux'
+import { type GlobalState } from '~/store/'
+
+const watchedActions = [ADD_SAFE, UPDATE_SAFE]
+
+const safeStorageMware = store => next => async (action) => {
+  const handledAction = next(action)
+  if (watchedActions.includes(action.type)) {
+    const { getState }: { getState: GetState } = store
+    const state: GlobalState = store.getState()
+    console.log(state)
+  }
+  return handledAction
+}
+
+export default safeStorageMware

src/store/index.js

@@ -7,6 +7,7 @@ import {
 import thunk from 'redux-thunk'
 import provider, { PROVIDER_REDUCER_ID, type State as ProviderState } from '~/logic/wallets/store/reducer/provider'
 import safe, { SAFE_REDUCER_ID, type State as SafeState } from '~/routes/safe/store/reducer/safe'
+import safeStorage from '~/routes/safe/store/middleware/safeStorage'
 import tokens, { TOKEN_REDUCER_ID, type State as TokensState } from '~/logic/tokens/store/reducer/tokens'
 import transactions, {
   type State as TransactionsState,
@@ -17,7 +18,7 @@ export const history = createBrowserHistory()
 
 // eslint-disable-next-line
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-const finalCreateStore = composeEnhancers(applyMiddleware(thunk, routerMiddleware(history)))
+const finalCreateStore = composeEnhancers(applyMiddleware(thunk, routerMiddleware(history), safeStorage))
 
 export type GlobalState = {
   providers: ProviderState,