Ошибка: Действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий.на получение данных из базы Firebase

Question

Я создаю веб-приложение на реагирующем редуксе с помощью firebase.У меня есть два действия getUsers и saveUser, как показано в коде ниже.Я могу сохранить пользовательские данные, но не могу получить данные из firebase. Функция mapDispatchToProps не в правильном синтаксисе или в действии пользователя.

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));