Redux TypeError：调度不是函数

Question

这是我第一次遇到redux的问题。它以前一直为我工作。我在这里查看了许多其他问题，但找不到答案。我正在尝试制作一个登录页面。它不仅在反应部分有问题。即使涉及到userAction.js，问题仍然出现。

我在这里将我的index.js与商店一起建立

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './redux/reducers/rootReducer';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
)

serviceWorker.unregister();

这是我的Login.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    setUsername,
    setPassword,
    login,
} from './redux/actions/userAction'
import { Redirect } from 'react-router-dom';

export const Login = ({ username, password, isLoggedIn, loadingState, dispatch }) => {
    if (isLoggedIn) {
        return <Redirect to="/" />;
    }
    return (
        <div>
            {loadingState === 'loading' && <h2>Loading...</h2>}
            <div>
                Username:
                <input
                    value={username}
                    onChange={e => dispatch(setUsername(e.target.value))}
                />
            </div>
            <div>
                Password:
                <input
                    type="password"
                    value={password}
                    onChange={e => dispatch(setPassword(e.target.value))}
                />
            </div>
            {loadingState === 'error' && <b>User name or password incorrect</b>}
            <button onClick={() => dispatch(login())}>Login</button>
        </div>
    )
}

const mapStateToProps = state => ({
    username: state.userReducer.username,
    password: state.userReducer.password,
    isLoggedIn: state.userReducer.isLoggedIn,
    loadingState: state.userReducer.loadingState,
})

export default connect(mapStateToProps)(Login)

这是我的userAction.js

export const setUsername = username => ({
    type: 'USER_SET_USERNAME',
    username,
})

export const setPassword = password => ({
    type: 'USER_SET_PASSWORD',
    password,
})

export const setIsLoggedIn = IsLoggedIn => ({
    type: 'USER_SET_IS_LOGGED_IN',
    IsLoggedIn,
})

export const setLoadingState = loadingstate => ({
    type: 'USER_SET_LOADING_STATE',
    loadingstate,
})

export const setToken = token => ({
    type: 'USER_SET_TOKEN',
    token,
})

export const login = (dispatch, getState) => {
    console.log('login function!');
    const reduxEvent = setLoadingState('loading')
    console.log(reduxEvent)
    dispatch(reduxEvent)
    const credential = {
        username: getState().userReducer.username,
        password: getState().userReducer.password,
    }
    fetch('/login', {
        method: 'POST',
        body: JSON.stringify(credential)
    })
    .then(res => res.json())
    .then(data => {
        console.log(data);
        if (data.valid) {
            dispatch(setIsLoggedIn(true))
            dispatch(setToken(data.token))
            dispatch(setLoadingState('init'))
        } else {
            dispatch(setLoadingState('error'))
        }
    })
    .catch(err => console.log(err))
}

和我的userReducer.js

const INITIAL_STATE = {
    username: '',
    password: '',
    isLoggedIn: false,
    loadingState: 'init',
    token: '',
}

const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'USER_SET_USERNAME':
            return {
                ...state,
                username: action.username
            }
        case 'USER_SET_PASSWORD':
            return {
                ...state,
                password: action.password
            }
        case 'USER_SET_IS_LOGGED_IN':
            return {
                ...state,
                isLoggedIn: action.isLoggedIn
            }
        case 'USER_SET_LOADING_STATE':
            return {
                ...state,
                loadingState: action.loadingState
            }
        case 'USER_SET_TOKEN':
            return {
                ...state,
                token: action.token
            }
        default:
            return state;
    }
}

export default userReducer

Answer 1

在action.js中，您需要执行export const USER_SET_USERNAME = 'USER_SET_USERNAME'之类的操作，而不是在reducer.js中：import { USER_SET_USERNAME ... } from '.../action.js。