Redux Webworker Middleware

lib.js

import { get } from 'lodash'

export const connectToWorker = Worker => {
  const worker = new Worker()
  let registered = false

  return (store, action) => {
    const state = store.getState()

    if (!registered) {
      worker.addEventListener('message', ({ data }) => store.dispatch(data));
      registered = true
    }

    worker.postMessage({ action, state })
  }
}

export const connectToStore = worker => cb => {
  worker.addEventListener('message', ({ data }) => {
    cb({
        dispatch: worker.postMessage,
        getState: () => get(data, 'state', {})
      },
      get(data, 'action', {})
    )
  })
}

middleware.js

import { connectToWorker } from 'utils/worker'

import Worker from './demo.worker.js'

export default connectToWorker(Worker)

worker.js

import { connectToStore } from 'utils/worker'

const subscribe = connectToStore(self)

subscribe((store, action) => {
  console.log(action, store.getState())
})