React Webpack - 未捕获的TypeError：__ WWEPACK_IMPORTED_MODULE_4_

Question

我的特殊错误是在提交表单时运行login然后我看到以下错误，我还包括了actions / reducers，并且包含了所有内容。我相信它与升级到react-router-dom有关，但说实话，我对此感到非常困惑：/

store_configureStore是我商店的名称，我确定它来自我导出的商店文件，名为import configureStore from './store/configureStore';

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_4__store_configureStore__.a.dispatch is not a function

错误

动作

减速

// There are three possible states for our login
// process and we need actions for each of them
export const LOGIN_CHECK = 'LOGIN_CHECK'
export const LOGIN_REQUEST = 'LOGIN_REQUEST'
export const LOGGED_IN = 'LOGGED_IN'
export const LOGIN_FAILURE = 'LOGIN_FAILURE'
export const UN_AUTHED = 'UN_AUTHED'


function receiveLogin(user) {
    return {
        type: LOGGED_IN,
        isFetching: false,
        isAuthenticated: true
    }
}

export function submitLogin (creds) {
    if(creds.email !== "" && creds.pw !== ""){
        localStorage.setItem('LOGGED_IN', true);
        return receiveLogin();
    }
}

组件

import React from 'react';
import { NavLink } from 'react-router-dom'
import * as authAction from '../../actions/auth';
import Logo from '../shared/logo';
import store from '../../store/configureStore';
import loggedOut from './_home.css';

class SignIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: 'as',
      pw: 'as'
    };

    // Bind callback methods to make `this` the correct context.
    this.logIn = this.logIn.bind(this);
    this.changed = this.changed.bind(this);
  }

  logIn = ( e ) => {
    e.preventDefault ();
    store.dispatch(authAction.submitLogin(this.state));
  };

  render(){
    return (
      <div className={loggedOut.home}>
        <Logo />
        <h2>Please sign in to your account</h2>
        <form role="form" onSubmit={this.logIn}>
          <input type="text" name="email" defaultValue={this.state.email} onChange={this.changed} placeholder="Enter email address"/>
          <input type="password" name="pw" defaultValue={this.state.pw} onChange={this.changed} placeholder="Password"/>
          <button>Sign In</button>
        </form>
        <div className={loggedOut.extraDetails}>
          <NavLink to="/signup">Don't have an account yet?</NavLink>
          <NavLink to="/skip" className={loggedOut.extraDetailsRight}>Skip</NavLink>
        </div>
      </div>
    );
  }
}

export default SignIn;

动作

import { List, Map } from 'immutable';

const initialState = {
    loggedIn: false,
    shouldRedirect: false,
    errorMessage: null
};

export default function (state = initialState, action) {
    switch (action.type) {
        case 'LOGIN_REQUEST':
            return Object.assign({}, state, { loggedIn: true, shouldRedirect: true });
        case 'LOGGED_IN':
            return Object.assign({}, state, { loggedIn: true, shouldRedirect: true });
        case 'LOGIN_FAILED':
            return Object.assign({}, state, { loggedIn: false, shouldRedirect: false, errorMessage: action.error.message })
    }
    return state
}

ConfigStore

import { createStore, applyMiddleware, compose } from 'redux'
import { createLogger } from 'redux-logger'
import { routerMiddleware } from 'react-router-redux'
import reducers from '../reducers';

const configureStore = function (history, preloadedState = {}) {
  // Build the middleware for intercepting and dispatching navigation actions
  const middlewareHistory = routerMiddleware(history);

  const store = createStore(
    reducers,
    preloadedState,
    compose(
      applyMiddleware(createLogger(), middlewareHistory)
    )
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers').default;

      store.replaceReducer(nextReducer);
    });
  }

  return store;
};

export default configureStore;

Answer 1

您导出configureStore作为函数并忘记调用它。所以你调用了dispatch()方法，但是这个属性并不存在于函数对象中（它是undefined而不是函数），然后我们得到了相应的错误。 / p>