Passing in redux-devtools to a redux store with middleware

Question

How is this code processed in relation to the way it is written in the redux-devtools documentation?

https://github.com/auth0-blog/redux-auth/blob/master/index.js#L10-L12

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)

let store = createStoreWithMiddleware(quotesApp)

I'm not sure how to rewrite this to include DevTools but I did find this GitHub link including a pull request to include DevTools, which I've since gotten working. However, I still do not understand how it is being applied and what's going on with the let something = function(param1,param2)(function). I know that with that syntax the return value of applyMiddleware is being sent to createStore, but the createStore syntax takes a reducer, initialState, and an enhancer. How is this being applied here?

import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
  </DockMonitor>
)

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)

let store = createStoreWithMiddleware(quotesApp, DevTools.instrument())

The syntax confuses me as opposed to the following syntax from the redux-devtools documentation.

What happens to initialState? In the example there is no reference to initialState anywhere.

This video explains how to connect redux devtool to basic react redux app - https://youtu.be/TSOVLXQPWgA — Prem, Nov 18 '17 at 06:02

score 1 · Accepted Answer · answered Jun 01 '16 at 18:07

The store enhancer definition signature looks roughly like this (snipped from the definition of `applyMiddleware):

export default function applyMiddleware(...middlewares) {
    return (createStore) => (reducer, preloadedState, enhancer) => {
        // snip actual enhancer logic

        return {
            ...store,
            dispatch
        }
    }
}

So, the enhancer definition actually returns a function that takes a reference to the createStore function itself.

Unfortunately, somehow people seem to have copied that very functional-oriented calling pattern from somewhere, which is really hard to understand. Not sure if it was in an earlier version of the docs, or what. Note that that particular usage pattern doesn't allow defining initialState (or, as it's about to be renamed, preloadedState).

So yes, the current definition pattern, and the one that I think is much more readable, is:

const middlewares = [thunk, myMiddleware];
const middlewareEnhancer = applyMiddleware(...middlewares);
const enhancers = compose(middlewareEnhancer, someOtherEnhancer);

const store = createStore(reducer, preloadedState, enhancers);

Great that makes a lot more sense. Thanks. What about the compose function? How come it's not necessary in the unreadable example? So it looks like I was right about initialState, that there's no need for it because this example is a authentication example and when you first hit the app, you're not logged in so there's really no reason for initialState, hence probably why the example was coded in that weird function notation. Are these correct assumptions? — eveo, Jun 01 '16 at 18:34
The enhancer function signature takes the "old" enhancer as an argument (the `DevTools.instrument()` part of your sample). So, compose isn't needed there. As far as `initialState` - actually, if there's only two arguments to `createStore()`, Redux checks to see if the second argument is a function or an object. If it's an object, it must be `initialState`. If it's a function, it must be an enhancer instead. So, that `createStoreWithMiddleware` call _can_ take `initialState`, it's just not being passed in. — markerikson, Jun 01 '16 at 21:06

Passing in redux-devtools to a redux store with middleware

1 Answers1