webext-redux: [Question] Cannot applyMiddleware redux-thunk, action undefined

Hello, I’m trying to apply redux-thunk to react-chrome-redux but I’m getting these errors when trying to dispatch an ‘asynchronous’ action:

Error from popup.js:

Error from event.js (background process)

When I step through after the action gets invoked, action is undefined in createStore:

I’ve been trying to debug this for a while, any help would be nice!

// Code inside React Component to test
  componentDidMount() {
    const { actions } = this.props;
    actions.asyncCount();
  }

// actions.js
export function asyncCount () {
  return function (dispatch) {
    setTimeout(function() {
      dispatch({type: "ADD_COUNT"})
    }, 1000)
  }
}

// event.js

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

import {wrapStore} from 'react-chrome-redux';
const store = createStore(rootReducer, applyMiddleware(thunk));

wrapStore(store, {
  portName: 'DRAG_NOTE'
});

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 32 (10 by maintainers)

Commits related to this issue

Add documentation on async actions in aliases to README After having the same problem in issue #70, I thought it might be helpful to have a complete solution documented in one place. Could also go in... — committed to daftgopher/react-chrome-redux by daftgopher 6 years ago

Most upvoted comments

Yup!

TerencedzLi on Apr 9, 2017

Yeah have your alias return {type:“someaction”}

CrustyJew on Mar 30, 2017

@TerencedzLi left a video for ya - only showed the event.js and popup index.js scripts - so no worries I haven’t exposed all your code! I noticed that the code was taken from the examples repo @tshaddix set up, so I figured the codebase structure wouldn’t give much away of what you’re working on either. Let me know if you want me to take this video down though!

https://www.useloom.com/share/7edf09825bf14e8f9b4c93fdc201290d

Here’s a link to aliases in the README.

@tshaddix I think we discussed potentially allowing other middleware to be applied to the proxy stores. I don’t remember if this is currently possible.

vhmth on Mar 20, 2017

@Nishchit14 ah this makes sense. When you’re using an alias, it’s really just re-injecting the new action into the pipeline. When you do this, the middleware will actually run again on this new action. Since it has the same name, it will alias it again and forever the loop will go. I never did discover why this happens with redux middleware logic but it is definitely a known issue.

tshaddix on Jul 8, 2017

Strange. I really feel like there should be a better way to revamp aliases, but I still can’t for the life of me wrangle my head around it. I suppose it would help to write down all the pitfalls right now and then see if I can figure out a solution that tries to address all or most of them.

vhmth on Jul 6, 2017

Okay I found the issue, I have the same ALIAS name and ACTION name. That’s why it went to the infinite loop.

now I change the name like Alias: alias@GET_ALL_OPEN_TABS Action: GET_ALL_OPEN_TABS

Nishchit14 on Jul 5, 2017

This is what my working alias ended up looking like

import { authenticateUser } from '../actions';

//aliases
const aliases = {
  'authenticate-user-alias': authenticateUser // <--- async action
};

Damn ECMAscript throws me off yet again. One day I’ll understand it.

Thanks @CrustyJew and @TerencedzLi

godd9170 on Mar 30, 2017

I may have run in to this same issue, it appears you cannot dispatch async actions (thunks) from a content script to the background page, which makes sense as it relies on the messaging framework which means that the messages passed have to be serializable to json.

What you’d need to do is intercept the action with an alias and then dispatch the async action on the background page itself.

CrustyJew on Mar 20, 2017