ReactJS + Redux + Reduc-thunk 无法调度承诺

Posted

技术标签:

【中文标题】ReactJS + Redux + Reduc-thunk 无法调度承诺【英文标题】:ReactJS + Redux + Reduc-thunk Can't dispatch promise 【发布时间】:2017-01-05 14:58:44 【问题描述】:

当我尝试使用 redux 发送承诺时,我收到了这条消息,但我不知道我错了什么

未捕获的错误:操作必须是普通对象。使用自定义中间件进行异步操作。

1) 这里是我的 createStore

import  createStore, applyMiddleware, compose  from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import RootReducer from '../reducers/root.reducer'

export default function configureStore(preloadedState) 
  const store = createStore(
      RootReducer,
      preloadedState,
      compose(
          applyMiddleware(thunk), createLogger()
      )
  )
  return store

2) 在我的组件中,我像这样调度我的操作

dispatch(myAction(myParam))

3) 这是 myAction 代码

export function myAction(dispatch, myParam)
    return fetchList(myParam)
      .then(response => response.json())
      .then(json => 
        console.log(json)
      )
      .catch(err => 
        if (err)
          throw err
      )

但是,如果我这样称呼我的行动,那就行了:

myAction(dispatch, myParam)

我认为存在 redux-thunk 问题,但为什么...

【问题讨论】:

【参考方案1】:

使用redux-thunk,您必须从动作创建者那里返回一个函数。 dispatch 将作为第一个参数传递给此函数,因此您可以在函数内部的任何位置调用它以执行 dispatch 不同的操作。

export function myAction(myParam) 
  return dispatch => 
    fetchList(myParam)
      .then(response => response.json())
      .then(json => 
        dispatch(
          type: FETCH_LIST_SUCCESS,
          list: json
        );
      )
      .catch(err => 
        if (err)
          throw err;
      );
  ;

请仔细阅读docs。

【讨论】:

【参考方案2】:

Thunk 允许动作创建者返回一个函数而不是普通对象,所以你可以像使用它一样

export function myAction(myParam) 
  return dispatch => 
    console.log("IN ACTION");
    fetchList(myParam)
    .then(response => response.json())
    .then(json => 
      dispatch(
        type: FETCH_LIST_SUCCESS,
        list: json
      );
    )
    .catch(err => 
      if (err)
      throw err;
    );
  ;

你返回了一个 Promise 对象,这是问题的一部分。

【讨论】:

以上是关于ReactJS + Redux + Reduc-thunk 无法调度承诺的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS + Redux + Reduc-thunk 无法调度承诺

Redux/Flux(使用 ReactJS)和动画

如何正确地从 ReactJS + Redux 应用程序进行 REST 调用?

使用 ReactJS + Redux 时需要 componentWillReceiveProps 和 replaceProps 吗?

无法使用 ReactJs、Axios、Redux 渲染/显示从 api 获取的数据

redux的中间层 --reactjs学习