reactjs - React-Redux Actions 可能没有未定义的“类型”属性
问题描述
当我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)
动作.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']
}
})
}
}
解决方案
感谢您帮助我@Yury 和@Khatri
问题是一个愚蠢的错误,
我改变了
import RSAA from 'redux-api-middleware'
至
import { RSAA } from 'redux-api-middleware'
它正在工作。
感谢您的帮助...
推荐阅读
- angular - 通过 Kubernetes 使 Angular 应用程序可用
- angular - 如何根据语言环境更改数字格式
- mongodb - 在 docker 中安装 tensorflow 和 mongodb 的最佳方法是什么?
- python-3.x - 迭代所有页面和爬虫表的元素,在 Python 中保存为数据框
- excel - 在页脚中设置文本格式
- javascript - 如何在打字稿中形成数组数组?
- javascript - Webpack esm 模块解析“../node_modules/react-bootstrap/esm/index.js 中的警告”
- c# - MongoDB .NET - 按名称获取 IMongoCollection
- c++ - cfmakeraw() 在 Macos X / Unix C / C++ 上可用吗?
- javascript - 如何将对象数组转换为基本对象?