React-Redux Actions 可能没有未定义的“类型”属性

Question

当我在调度操作中使用redux-api-middleware 时，我收到了这个错误：

× 错误：操作可能没有未定义的“类型”属性。你 拼错一个常数？

我猜我的 applyMiddleware 方法不正确。

我的 index.js

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { Router } from 'react-router-dom'
import {apiMiddleware} from 'redux-api-middleware';

import Root from './containers/Root'
import rootReducer from './reducers'
import history from './constants/history'

const store = createStore(rootReducer, applyMiddleware(apiMiddleware, thunkMiddleware))

render(
    <Router history={history}>
        <Root store={store} />
    </Router>
   ,
    document.getElementById('root')
)

---

这个包的自述文件应用了如下中间件：

官方文档的 configureStore.js

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { apiMiddleware } from 'redux-api-middleware';
import reducers from './reducers';

const reducer = combineReducers(reducers);
const createStoreWithMiddleware = applyMiddleware(apiMiddleware)(createStore);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(reducer, initialState);
}

官方文档的app.js

const store = configureStore(initialState);

但我不知道如何在我的结构中应用它，我错了吗？

添加...

这是我的代码块

** LoginPage.js**

const LoginPage = ({dispatch, auth}) => {

    let emailInput, passwordInput;

    if(auth.user){
        return <Redirect to="/dashboard" />
    }

    return (
        <div>
            <h3>Login</h3>

            <form onSubmit={e => {
                e.preventDefault()
                if (!emailInput.value.trim() || !passwordInput.value.trim()) {
                    return
                }
                dispatch(processLogin({
                    email: emailInput.value.trim(),
                    password: passwordInput.value.trim(),

                }))
            }}>
                <input type="text" ref={node => emailInput = node} placeholder="example@email.com"/>
                <input type="password" ref={node => passwordInput = node} placeholder="password"/>
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        auth : state.auth
    };
}

export default connect(mapStateToProps)(LoginPage)

actions.js

export const processLogin = (user) => {
    return dispatch => {
        dispatch({
            [RSAA]: {
                endpoint: "http://localhost:3000/api/v1/sign-in",
                method: "POST",
                body: JSON.stringify({email: user.email, password: user.password}),
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
                types: ['LOGIN', 'LOGIN_SUCCESS', 'LOGIN_FAILURE']
            }
        })
    }
}

Answer 1

感谢@Yury 和@Khatri 帮助我

问题是一个愚蠢的错误，

我变了

import RSAA from 'redux-api-middleware'

到

import { RSAA } from 'redux-api-middleware'

它正在工作。

感谢您的帮助...

Answer 2

您的 processLogin 返回一个 thunk（即函数不是对象）。您必须添加redux-thunk 中间件之前 apiMiddleware 来处理函数

const store = createStore(rootReducer, {}, applyMiddleware(thunkMiddleware, apiMiddleware))

或者使processLogin返回一个对象。

export const processLogin = (user) => {
    return {
            [RSAA]: {
                endpoint: "http://localhost:3000/api/v1/sign-in",
                method: "POST",
                body: JSON.stringify({email: user.email, password: user.password}),
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
                types: ['LOGIN', 'LOGIN_SUCCESS', 'LOGIN_FAILURE']
            }
        }
}