React Webpack - Uncaught TypeError：__WEBPACK_IMPORTED_MODULE_4_

Question

フォームを送信しているときに私が特に気付いたのはloginです。私は以下のエラーを見て、私はアクション/レデューサーも含めて、すべてが含まれています。私はreact-router-domへのアップグレードを行うにはその何かを信じて、正直なところ私はかなりこれによりbaffedだ：/

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であり、当然の機能ではありません）。その後、対応するエラーが発生します。