我是 redux 新手,遇到错误,在分派(dispatch)操作时遇到错误
“操作必须是普通对象。使用自定义中间件进行异步操作。”,我已经检查了流程,但没有看到任何问题,下面是代码”
我的 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)
索引.js:
export {
auth,
logout
} from './auth'
操作(auth.js):
export const logout =()=>{
return(
actionTypes.AUTH_LOGOUT
)
};
reducer :
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 中存在任何问题?或者其他可能在调度时,请指导?
最佳答案
您的操作创建者应该返回一个具有类型的对象,目前您仅返回字符串常量。
// Actions(auth.js):
export const logout =()=>{
return {
type: actionTypes.AUTH_LOGOUT,
};
};
关于javascript - Redux 错误操作必须是普通对象。使用自定义中间件进行异步操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57585802/