Redux 错误操作必须是普通对象。使用自定义中间件进行异步操作
Redux Error Actions must be plain objects. Use custom middleware for async actions
我是 redux 的新手,我遇到了一个错误,在调度一个动作时我遇到了错误
"Actions must be plain objects. Use custom middleware for async actions.",我检查了流程,但没有发现任何问题,下面是代码
我的 JS 容器文件:
import React from 'react'
import {Redirect} from 'react-router-dom'
import * as actions from './../store/actions/index'
import { connect } from 'react-redux'
class home extends React.Component{
constructor(props){
super(props);
this.state={
isClk:false
}
}
performLogout = (evt)=> {
evt.preventDefault();
this.props.onLogout();
this.setState({isClk: true})
};
render(){
let redirect=null;
if (this.state.isClk){
redirect=<Redirect to="/login"/>
}
return(
<div>
{redirect}
<h1>In Home</h1>
<button onClick={this.performLogout}>Logout</button>
</div>
)
}
}
const mapDispatchToProps = dispatch =>{
return {
onLogout: () => dispatch(actions.logout())
}
};
export default connect(null,mapDispatchToProps)(home)
Index.js:
export {
auth,
logout
} from './auth'
操作数(auth.js):
export const logout =()=>{
return(
actionTypes.AUTH_LOGOUT
)
};
减速器:
const authLogout=(state,action)=>{
return updateObject(state,{
token:null,
loading:false,
error:null
})
};
const reducer=(state=initialState,action)=>{
switch(action.type){
case actionTypes.AUTH_FAIL: return authFail(state,action);
case actionTypes.AUTH_LOGOUT: return authLogout(state,action);
default:
return state
}
};
商店:
import {Provider} from 'react-redux'
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import {BrowserRouter} from "react-router-dom";
import authReducer from './Containers/store/reducers/auth'
import thunk from 'redux-thunk';
const composeEnhancers = compose;
const RootReducer=combineReducers({
auth:authReducer
});
const store=createStore(RootReducer,composeEnhancers(applyMiddleware(thunk)));
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
我想在用户单击注销按钮时执行注销操作,我可以找到问题所在,我的商店是否已正确初始化或 thunk 有任何问题?或任何其他可能在调度时,请指导?
您的动作创建者应该 return 一个具有类型的对象,目前您只是 return 字符串常量。
// Actions(auth.js):
export const logout =()=>{
return {
type: actionTypes.AUTH_LOGOUT,
};
};
Redux 中的动作需要是普通对象,所以你需要添加一个如下所示的对象
export const logout = () => ({
type: actionTypes.AUTH_LOGOUT
});
我是 redux 的新手,我遇到了一个错误,在调度一个动作时我遇到了错误
"Actions must be plain objects. Use custom middleware for async actions.",我检查了流程,但没有发现任何问题,下面是代码
我的 JS 容器文件:
import React from 'react'
import {Redirect} from 'react-router-dom'
import * as actions from './../store/actions/index'
import { connect } from 'react-redux'
class home extends React.Component{
constructor(props){
super(props);
this.state={
isClk:false
}
}
performLogout = (evt)=> {
evt.preventDefault();
this.props.onLogout();
this.setState({isClk: true})
};
render(){
let redirect=null;
if (this.state.isClk){
redirect=<Redirect to="/login"/>
}
return(
<div>
{redirect}
<h1>In Home</h1>
<button onClick={this.performLogout}>Logout</button>
</div>
)
}
}
const mapDispatchToProps = dispatch =>{
return {
onLogout: () => dispatch(actions.logout())
}
};
export default connect(null,mapDispatchToProps)(home)
Index.js:
export {
auth,
logout
} from './auth'
操作数(auth.js):
export const logout =()=>{
return(
actionTypes.AUTH_LOGOUT
)
};
减速器:
const authLogout=(state,action)=>{
return updateObject(state,{
token:null,
loading:false,
error:null
})
};
const reducer=(state=initialState,action)=>{
switch(action.type){
case actionTypes.AUTH_FAIL: return authFail(state,action);
case actionTypes.AUTH_LOGOUT: return authLogout(state,action);
default:
return state
}
};
商店:
import {Provider} from 'react-redux'
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import {BrowserRouter} from "react-router-dom";
import authReducer from './Containers/store/reducers/auth'
import thunk from 'redux-thunk';
const composeEnhancers = compose;
const RootReducer=combineReducers({
auth:authReducer
});
const store=createStore(RootReducer,composeEnhancers(applyMiddleware(thunk)));
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
我想在用户单击注销按钮时执行注销操作,我可以找到问题所在,我的商店是否已正确初始化或 thunk 有任何问题?或任何其他可能在调度时,请指导?
您的动作创建者应该 return 一个具有类型的对象,目前您只是 return 字符串常量。
// Actions(auth.js):
export const logout =()=>{
return {
type: actionTypes.AUTH_LOGOUT,
};
};
Redux 中的动作需要是普通对象,所以你需要添加一个如下所示的对象
export const logout = () => ({
type: actionTypes.AUTH_LOGOUT
});