Действия React-Redux могут не иметь неопределенного свойства "type"

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')
)

---

Промежуточное программное обеспечение readme для этого пакета, как показано ниже:

Официальный документ 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 middleware до 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']
            }
        }
}