Когда я использовал 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']
}
})
}
}
@ShubhamKhatri Привет, я добавил свой компонент и файл действия, я не знаю, что не так, вы можете увидеть это всего за несколько секунд ..? Спасибо.





Ваш 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
@Juntae Третий аргумент - тоже усилитель.
Привет, спасибо, я понял причину и исправил ее, спасибо
Спасибо, что помогли мне @ Юрий и @ Хатри
Проблема была в глупой ошибке,
Я испортил
import RSAA from 'redux-api-middleware'
к
import { RSAA } from 'redux-api-middleware'
и это работает.
Спасибо за помощь ...
Кажется, проблема в отправке действия, а не в конфигурации магазина