Help making async calls in action

[islalobo]

I have read through the issues relating to this but I'm still not getting the expected response. The action creator never seems to be accessed when an action is dispatched, and this is odd behaviour. I am not sure what the cause is and have been trying to follow along with related issues and documentation

For context, these are the related dependencies that we are working with

  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.1",
    "react-chrome-redux": "^1.5.0",
    "react-redux": "^5.0.7",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"

This is my store

import { createStore, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";

import { wrapStore, alias} from "react-chrome-redux";
import thunk from "redux-thunk";

import rootReducer from "../reducers";

import login from "../actions/aliases/authActions";

import { LOGIN } from "../constants/constants";

const aliases = {};
aliases['alias@' + LOGIN] = login;

const logger = createLogger();

const store = createStore(
    rootReducer,
    applyMiddleware(
        alias(aliases),
        thunk,
        logger
    )
  );

wrapStore(store, {
    portName: "example",
});

My rootReducer

import { combineReducers } from "redux";

import user from "./user";
import location from "./location";
import dictation from "./dictation";
import vocabulary from "./vocabulary";

const rootReducer = combineReducers({
  user,
  location,
  dictation,
  vocabulary
});

export default rootReducer;

The reducer

import { LOGIN } from '../constants/constants'; // <<--- normally I would import the constants
import axios from "axios";

let user = JSON.parse(localStorage.getItem('user'));
const initialState = user ? { user } : {};

export default (state = initialState, action) => {
    switch (action.type) {

        // and then reference the constant here but, 
        case "alias@LOGIN": // <<--- I have to access the 'type' like this
            return action.payload;
            break;

        default:
            return state;

    }
}

My action (which never seems to get hit by anything)

export function login(email, password) {
        setTimeout(() => {
        const data = { "email": email, "password": password };

        const login = axios({
          // make call
        });

        login.then(
          response => {
              localStorage.setItem("user", JSON.stringify(response.data));

              let user = JSON.stringify(response.data);
              return user;
          },
          error => {
            return error;
          }
        );
    }, 300);
}

Calling dispatch from the component

this.props.dispatch({
    type: 'alias@' + LOGIN,
    payload: { email, password }
});

[marcokam]

Just saw this today and might be a bit of a late response. Are you current still having a problem getting the alias action to run?

If you are, I think we're missing the part of your code that creates a proxy store in your app. Would you also be able to post that? Also, would you be able to clarify where each of these scripts are being included? For example, is it being included in the background, or as a content script or a browser action?

[tshaddix]

Closing due to lack of response. Thanks for helping @marcokam !