Redux-Thunk :操作必须是普通对象 [英] Redux-Thunk : Actions must be plain objects

问题描述

Redux thunk 对我不起作用，不知道为什么.之前，一切正常.现在我试图让 redux-thunk 工作，但它只是给了我

Redux thunk is not working for me, not sure why not. Before, everything worked. Now I'm trying to get redux-thunk to work, but it's just giving me

动作必须是普通对象

我认为我的代码相当标准:

My Code is fairly standard, I think:

createStore

import { createStore as reduxCreateStore, applyMiddleware } from 'redux';
import reducers from './src/reducers';

import reduxThunk from 'redux-thunk';

const createStore = () =>
  reduxCreateStore(reducers, {}, applyMiddleware(reduxThunk));
export default createStore;

将 store 放入 Provider

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./src/reducers";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(reducer);
  }

  render() {
    return (
      <Provider store={this.store}>
        //...My App
      </Provider>
    );
  }
}

从 React 组件调用操作

import React, { Component } from "react";
import m from "mousetrap";
import { connect } from "react-redux";
import * as actions from "./src/actions";

class Mousetrap extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() { //binding the action to mousetrap hotkeys here
    m.bind(["space"], () => this.props.nextDiv());
  }
  //...
}

function mapStateToProps(state) {
  return {
    auth: state.auth,
  };
}

export default connect(mapStateToProps, actions)(Mousetrap);

动作创建者:

export const nextDiv = () => {
   return (dispatch, getState) => {
     dispatch({ type: NEXT_DIV });
  };
};

从我目前在网上找到的内容来看，当他们的动作创建者出现问题时，即当他们不返回函数等时，大多数人似乎都会收到此错误 - 但我这样做是正确的，我相信吗?

From what I've found online so far, it looks like most people get this error when there is something wrong in their action creator, i.e. when they don't return the function etc. - but I am doing this correctly, I believe?

我认为这一步可能出了问题:

I think maybe something goes wrong in this step:

import * as actions from "./src/actions";
//...
export default connect(mapStateToProps, actions)(Mousetrap);

也许我不能像这样导入 thunk 动作创建者?或者，也许我的绑定操作现在以某种方式不适用于 redux-thunk?抱歉问这个，我觉得这可能是微不足道的！非常感谢提前！

Maybe I cannot import thunk action creators like this? Or maybe my binding the action is somehow not working with redux-thunk now? Sorry for asking this, I feel it's probably something trivial! Thanks a lot in advance!

推荐答案

您没有使用 createStore 方法，而是再次从 redux 导入它.所以没有添加中间件.

You're not using your createStore method, rather importing it from redux again. So the middleware is not added.

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore } from "redux"; <--
import reducer from "./src/reducers";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(reducer);
  }

  render() {
    return (
      <Provider store={this.store}>
        //...My App
      </Provider>
    );
  }
}

这篇关于Redux-Thunk :操作必须是普通对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！