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

Когда я использовал redux-api-middleware для диспетчерского действия, я получил эту ошибку:

× Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

Я предполагаю, что мой метод 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 = "[email protected]"/>
                <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']
            }
        })
    }
}

Кажется, проблема в отправке действия, а не в конфигурации магазина

Shubham Khatri 25.04.2018 14:21

@ShubhamKhatri Привет, я добавил свой компонент и файл действия, я не знаю, что не так, вы можете увидеть это всего за несколько секунд ..? Спасибо.

JuntaeKim 25.04.2018 14:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
2 053
2

Ответы 2

Ваш processLogin возвращает преобразователь (т.е. функцию, а не объект). Вы должны либо добавить промежуточное ПО 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']
            }
        }
}

Спасибо ... Я попробовал оба способа, но проблема не исчезла ... Я не знаю, почему, возможно, мне следует отказаться от использования шаблона api

JuntaeKim 25.04.2018 14:50

@Juntae Третий аргумент - тоже усилитель.

Yury Tarabanko 25.04.2018 14:52

Привет, спасибо, я понял причину и исправил ее, спасибо

JuntaeKim 25.04.2018 14:52

Спасибо, что помогли мне @ Юрий и @ Хатри

Проблема была в глупой ошибке,

Я испортил

import RSAA from 'redux-api-middleware'

к

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

и это работает.

Спасибо за помощь ...

Другие вопросы по теме