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

Question

我已经浏览了这里关于此类问题的大部分帖子，但我仍然没有运气。这就是我的操作的样子，它与 redux-thunk npm 自述文件中的示例相同：

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

商店设置如下并传递给提供商：

export default createStore(
  rootReducer,
  applyMiddleware(thunk)
);

<Provider store={store}>

也尝试使用 compose：

export default compose(
  applyMiddleware(thunk)
)(createStore)(combineReducers({ ... }));

incrementAsync 是从连接的组件调度的，如下所示：

this.props.dispatch(incrementAsync);

我还是Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

NPM 版本：

"react": "^16.3.2", 
"react-dom": "^16.3.2", 
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2", 
"redux": "^4.0.0", 
"redux-thunk": "^2.2.0"

有没有我设置不正确的地方？

Answer 1

应该是this.props.dispatch(incrementAsync()); 而不是 this.props.dispatch(incrementAsync);

Answer 2

在连接器组件

this.props.dispatch(incrementAsync)

替换为

this.props.incrementAsync();

并在连接中绑定 incrementAsync 函数，如

connnect(null, { incrementAsync  }) (Component)

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

Redux Thunk : Action must be plain object

reactjs

redux-thunk

react-redux