Javascript 错误-操作必须是普通对象。使用自定义中间件进行异步操作

我正在尝试实现redux，并将和对象抛出到存储中。我在调用操作时得到了正确的对象，但在调用store.dispatch（）时，存储永远不会更新。它只包含初始状态。我想我什么都试过了，但我错过了一些小东西。任何帮助都将不胜感激！

signUp.js

import {getUsers} from "../actions/getUsersActions";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import store from '../store';

class SignMo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      users: [],
      firstName: '',
      lastName: '',
      email: '',
      username: '',
      password: ''
    }

  }

  async getUsers () {
    await this.props.getUsers()
      .then(response => {
        this.setState({users: response.users.users});
      })
      .catch(function (error) {
        console.log(error);
      });
    console.log('store =>', store.getState())
  };

  componentDidMount() {
    this.getUsers = this.getUsers.bind(this);
    this.getUsers();
  }

  render(){
     return(
       <stuff/>
    )
  }

const mapStateToProps = state => {
  const { users } = state;

  return {
    users: users,
  };
};

const mapDispatchToProps = dispatch =>  ({
  getUsers: () => store.dispatch( getUsers() )
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignMo);

getUsersReducer

import axios from "axios";


const url = "http://localhost:3333";

export const USERS_SUCCESS = "USERS_SUCCESS";
export const USERS_FAILURE = "USERS_FAILURE";

export const usersSuccess = users => {
  return {
    type: USERS_SUCCESS,
    users
  };
};

export const usersFailure = error => {
  return {
    type: USERS_FAILURE,
    error
  };
};

export const getUsers = () => {
  return dispatch => {
    return axios
      .get(`${url}/users`)
      .then(response => {
        console.log('success', JSON.stringify(response));
        return dispatch(usersSuccess(response.data));
      })
      .catch(error => {
        console.log('err', error.response.data.message);
        return dispatch(usersFailure(error.response.data));
      });
  };
};

store.js

import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "redux-saga";
import thunk from "redux-thunk";
import reducer from "./reducer";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware, thunk))
);

export default store;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“react router dom”导入{BrowserRouter}；
ReactDOM.render((
)，document.getElementById（'root'）；
serviceWorker.unregister（）；

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import { Provider } from 'react-redux'
import store from "./store";






export default function App() {
  return (
    <Provider store={store}>
      <Router>
        <div>
          <Switch>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/home">
            <div className='primaryContainer'>
            <EngagementBar/>
            <Home />
            </div>
            </Route>
            <Route path="/SignUp">
              <SignUp className="centerSignUp" />
            </Route>
            <Route path="/Tags">
              <Tags />
            </Route>
              <Route path="/signMo">
                <SignMo />
              </Route>
            <Route path="/search">
              <div className="primaryContainer"><Search /></div>
            </Route>
            <Route path="/profile">
              <Profile />
            </Route>
            <Route path="/upload">
              <Upload />
            </Route>
            <Route path="/notifications">
              <Notifications />
            </Route>
            <Route path="/information">
              < Information />
            </Route>
            <Route path="/"> {/*must be last !!!*/}
              <Load />
            </Route>
          </Switch>
        </div>
      </Router>
    </Provider>
  );
}

导入{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
从“react redux”导入{Provider}
从“/store”导入存储；
导出默认函数App（）{
返回(

{/*必须是最后一个！！！*/}
);
}

您有

throwInStore=（）=>{
仓库调度(
this.props.getUsers（）
);
};

但是你为什么派来这里

this.props.getUsers（）

已经是按照

mapDispatchToProps

中的定义分派到存储的操作。所以它就像说

dispatch（dispatch（getUsers（））

这也可能是一个问题：

const mapDispatchToProps=dispatch=>
bindActionCreators(
{
getUsers，
},
派遣
);

我不明白你为什么需要

bindActionCreators

。我想这样重写：

const mapDispatchToProps=dispatch=>({
getUsers:（）=>store.dispatch（getUsers（））
})

另外，现在使用

mapDispatchToProps

中的

dispatch

，您可以从

getUser

函数中删除所有

return dispatch

。每个操作实际上应该只有一个

dispatch

关键字：

export const getUsers=（）=>{
返回轴
.get（`${url}/users`）
。然后（响应=>{
log（'success'，JSON.stringify（response））；
store.dispatch（userssaccess（response.data））；
})
.catch（错误=>{
日志（'err'，error.response.data.message）；
store.dispatch（usersFailure（error.response.data））；
});
};

我一直遇到这个错误。这是您编写的大量代码。你能把它放进一个或一些功能性的例子中，这样我们就可以玩它了吗？我编辑了以匹配更改，但我的strore仍然只包含初始状态，并且从未更新。你是否仍然收到初始错误，或者现在只是存储区未更新的问题？您的实际

getUsers

函数中有许多

dispatch

语句。我编辑了我的答案…看看这些新的编辑是否有效。我得到的分派没有定义--在代码中，并且没有编译。。。我需要导入一些东西吗？我把它改成了

store.dispatch

…试试看。但是您必须导入

存储

。我从来没有用过沙箱，但我把它扔了进去。我可以让你成为一个快速的服务器，如果你需要/想要它，我只会返回一个用户。错误是否告诉你是哪个功能导致了问题？通常当我得到这个错误时，它会说问题是在代码中的什么地方产生的…？上述错误发生在组件中：在SignMo（由ConnectFunction创建）在ConnectFunction（在App.js:49）在Route（在App.js:48）在Switch（在App.js:32）在div（在App.js:31）在Router（由BrowserRouter创建）中在BrowserRouter中（在App.js:30）在Provider中（在App.js:29）在App中（在src/index.js:9）在BrowserRouter中（在src/index.js:8）在Router中（由BrowserRouter创建）

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import { Provider } from 'react-redux'
import store from "./store";






export default function App() {
  return (
    <Provider store={store}>
      <Router>
        <div>
          <Switch>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/home">
            <div className='primaryContainer'>
            <EngagementBar/>
            <Home />
            </div>
            </Route>
            <Route path="/SignUp">
              <SignUp className="centerSignUp" />
            </Route>
            <Route path="/Tags">
              <Tags />
            </Route>
              <Route path="/signMo">
                <SignMo />
              </Route>
            <Route path="/search">
              <div className="primaryContainer"><Search /></div>
            </Route>
            <Route path="/profile">
              <Profile />
            </Route>
            <Route path="/upload">
              <Upload />
            </Route>
            <Route path="/notifications">
              <Notifications />
            </Route>
            <Route path="/information">
              < Information />
            </Route>
            <Route path="/"> {/*must be last !!!*/}
              <Load />
            </Route>
          </Switch>
        </div>
      </Router>
    </Provider>
  );
}