操作必须是普通对象.当firebase auth.signOut()时

Question

我正在处理一个React Redux项目，该项目在尝试使用firebase auth:中的signOut((方法时导致了此错误

Actions must be plain objects. Use custom middleware for async actions.

奇怪的是登录操作的分派是正确的。

这是我建立商店的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux'
import root from './store/reducers/root'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { reduxFirestore, getFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
import firebase from './config/firebase'

const store = createStore(root,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
reduxFirestore(firebase),
)
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
const rrfProps = {
firebase,
config: firebase,
dispatch: store.dispatch
}
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById('root')
);

这里的动作创建者(正如你所看到的，与登录相同，但没有参数(：

export const login = (credentials) => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase()
const email = credentials.email
const password = credentials.password
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => dispatch(
{
type: 'LOGIN_SUCCESS',
}
))
.catch((err) => {
dispatch(
{
type: 'LOGIN_ERROR',
err
})
})
};
}

export const logout = () => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase()
firebase.auth().signOut()
.then(() => dispatch(
{
type: 'LOGOUT_SUCCESS'
}
))
// .catch((err) => {
//     dispatch({
//         type: 'LOGOUT_ERROR',
//         err
//     })
// })
};
}

这是减速器：

const initialState = {
authError: null
}
const user = (state = initialState, action) => {
switch (action.type) {
case 'LOGIN_SUCCESS':
return {
...state,
authError: null
}
case 'LOGIN_ERROR':
return {
...state,
authError: action.err.message
}
case 'LOGOUT_SUCCESS':
return {
...state,
authError: null
}
// case 'LOGOUT_ERROR':
//     return {
//         ...state,
//         authError: action.err.message
//     }
default:
return state
}
}
export default user

这是我将调度映射到道具并调用注销函数的组件：

import React from 'react'
import { Drawer, makeStyles, ListItem, ListItemText, List } from '@material-ui/core'
import { logout } from './../store/actions/auth'
import { connect } from 'react-redux'
const useStyles = makeStyles({
temporaryDrawer: {
}
})

const TemporaryDrawer = (props) => {

const classes = useStyles()
const list = ['Log Out']

const handleOnClose = (e) => {
e.preventDefault()
props.setState(false)
}

return (
<Drawer className={classes.temporaryDrawer} open={props.state} anchor="right" onClose={handleOnClose}>
<List>
{list.map(text =>
<ListItem button key={text} onClick={props.logout}>
<ListItemText primary={text} />
</ListItem>
)}
</List>
</Drawer >
);
}
const mapDispatchToProps = dispatch => {
return {
logout: () => dispatch(logout())
}
}
export default connect(null, mapDispatchToProps)(TemporaryDrawer);

我现在花了几个小时试图找出问题所在，但互联网上的所有答案都不适用于我的情况。

有人能帮我吗？

编辑

好吧，我怀疑这与redux开发工具有关。如果我删除+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()，它可以正常工作。我该如何正确设置？

Answer 1

我找到了解决方案，

商店应该这样创建：

const store = createStore(root,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
reduxFirestore(firebase),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
)