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：动作必须是普通对象

2 个答案: