错误:操作必须是纯对象.使用自定义中间件执行异步操作.从firebase获取数据

Question

我正在用firebase在react redux上构建web应用程序。我有两个动作getUsers和saveUser，如下代码所示。我能够拯救用户数据，但无法从firebase获取数据。是mapDispatchToProps函数的语法或userAction不正确。

UserForm.js

import React, { Component } from "react";
import { connect } from "react-redux";
import lod from "lodash";
import { database } from "../config/fbConfig";
import { getUsers, saveUser } from "../actions/userAction";
class UserForm extends Component {
constructor(props) {
super(props);
this.state = { name: "", email: "", city: "", age: "", users: {} };
this.submitMessage = this.submitMessage.bind(this);
this.handleChange = this.handleChange.bind(this);
this.renderUser = this.renderUser.bind(this);
}
componentDidMount() {
this.props.getUsers();
}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
submitMessage = e => {
e.preventDefault();
const params = {
name: this.state.name,
email: this.state.email,
city: this.state.city,
age: this.state.age
};
database.push(params);
this.setState({ name: "", email: "", city: "", age: "" });
};
renderUser() {
return lod.map(this.state.users, (user, key) => {
return (
<div key={user.email} className="col-sm-6">
<div className="card">
<div className="card-body">
<h4 className="card-title">{user.name}</h4>
<a href={`mailto:${user.email}`} className="card-link">
{user.email}
</a>
</div>
</div>
<hr />
</div>
);
});
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-sm-4">
<h2>Contact Form</h2>
<form onSubmit={this.submitMessage}>
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
name="name"
placeholder="Name"
value={this.state.name}
onChange={this.handleChange}
/>
<div className="form-group">
<label htmlFor="emai1">Email</label>
<input
type="email"
className="form-control"
name="email"
placeholder="Email"
value={this.state.email}
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<label htmlFor="city">City</label>
<select
className="form-control"
name="city"
value={this.state.city}
onChange={this.handleChange}
>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
</select>
</div>
<div className="form-group">
<label htmlFor="age">Age</label>
<input
type="number"
className="form-control"
name="age"
placeholder="Age"
value={this.state.age}
onChange={this.handleChange}
/>
</div>
<button type="submit" className="btn btn-primary">
Send
</button>
</form>
</div>
<div className="col-sm-1" />
<div className="col-sm-7">
<div className="row">
<h2>User Info</h2>
{this.renderUser()}
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
users: state.users
};
};
const mapDispatchToProps = dispatch => {
return {
saveUser: user => dispatch(saveUser(user)),
getUsers: () => dispatch(getUsers())
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserForm);

userAction.js

import { GET_USERS } from "../actionTypes";
import { database } from "../config/fbConfig";
export function getUsers() {
return dispatch => {
database.on("value", snap => {
dispatch({
type: GET_USERS,
payload: snap.val()
});
});
};
}
export function saveUser(user) {
return dispatch => database.push(user);
}

或者我的index.js文件中有错误吗

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import rootReducer from "./reducers";
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();

Answer 1

从index.js中的代码中，我可以看到您没有将代码配置为使用商店中的thunk中间件。

const store = createStore(rootReducer, applyMiddleware(thunk));

还要考虑使用bindActionCreators，以便使用mapDispatchToProps映射您的操作。请查看此链接。

Answer 2

我想您忘记在index.js中应用中间件了

const store = createStore(rootReducer, {}, applyMiddleware(thunk));