时间戳

首页 > 解决方案 > Redux-Thunk：动作必须是普通对象

javascript - Redux-Thunk：动作必须是普通对象

问题描述

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

动作必须是普通对象

我的代码相当标准，我认为：

创建商店

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 组件调用 Action

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

从到目前为止我在网上找到的内容来看，看起来大多数人在他们的动作创建者出现问题时会出现这个错误，即当他们没有返回函数等时 - 但我这样做是正确的，我相信？

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

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

也许我不能像这样导入 thunk 动作创建者？或者也许我的绑定动作现在无法与 redux-thunk 一起使用？抱歉问这个，我觉得这可能是微不足道的！提前非常感谢！

标签： javascriptreactjsreduxreact-reduxredux-thunk

解决方案

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

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

推荐阅读