KDC Menu

Saturday, April 28, 2018

TypeError: Undefined: Redux 4

Redux 4 > createStore > compose

The Error

            TypeError: Cannot read property 'apply' of undefined
            [node_modules/redux/es/redux.js:523]
        

The Problem and Solution

If you've gone through a tutorial in which they suggest adding the Redux Dev Tools in your store.js like this:

            window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        
But they're using it inside of a compose(), you could receive a Type Error for an undefined when the extension is not enabled (or present). The correct way to implement the Redux Dev Tools within a compose is as follows:

            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
        
I learned this the hard way, and was eventually brought rescue from GitHub user [zalmoxisus].
zalmoxisus also references the docs for this: [1.2 Advanced store setup (middleware and enhancers)]

Code Extract from [store.js]

      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
      )
    

A Little Error Verbosity

Friday, April 20, 2018

Tech Schools: Full-Stack JavaScript

Would anyone know of any good 6-12 month tech schools in the US that offer job placement? Looking to specialize in Full-Stack JavaScript.

Sunday, April 01, 2018

Expired To Be: Now Available Most Anywhere

As a gift to the month of April, Expired To Be is now accessible from any browser! :)

What is...
'Expired To Be' is an app where you can set reminders for 'things that expire'. Initially only available from the Chrome web store as a Chrome browser extension, it can now be accessed from any browser.
The new SPA version of the app is hosted on GitHub Pages (and built via Travis CI).

Both apps share the same source code, which is all open source on GitHub.

A Special Treat
The one and only; SPA Integration Diagram: This diagram details the layout and integration between my custom React 'Alarms API' and the Chrome extension core files.

SPA Alarm Notifications
The Expired To Be 'SPA version' provides a few options for 'expiration notifications' (although unfortunately some platforms still don't support web-based notifications; in which case it'll fall back to using the default, which is `alert()`). Modals are the other option, but are more passive.

Important Notes




  1. The SPA and Chrome extension do not share alarms. The extension uses Chrome's own internal storage and alarm system, which is not accessible from a normal web page.
  2. The SPA web page (tab) must stay open to allow the alarms to run. The Chrome extension runs in the browser's background.
Alarms API
For my React-based Alarms API, I borrowed the `TimerBox` component from my previous 'Done (for now)' SPA. (Done (for now) is a multi-timer; it was my 3rd React app, and my 1st TypeScript project.)

Data Storage
Because the 'Expired To Be' and 'Done (for now)' web apps both share the same `localStorage` (one for alarms, the other for timers), I made the Done (for now) timers viewable from within the 'Expired To Be' web app. I then went back and made the 'Expired To Be' alarms viewable from inside the 'Done (for now)' web app as well. Neither app can modify each other's alarms or timers, but there's room for some cross-app adaptability.

Always open to feedback. PRs welcome. ::tiphat::

Keith D Commiskey