ReactJS + Redux + Reduc-thunk 无法发送承诺

Question

当我尝试使用 redux 发送一个 promise 时，我收到了这条消息，但我没有看到我错了什么

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

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) 这是我的操作代码

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 问题，但为什么...

Answer 1

对于 redux-thunk，您必须 return 动作创建者的功能。 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。

Answer 2

Thunk 允许动作创建者 return 函数而不是普通对象，因此您可以像

一样使用它

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

您正在 return 创建一个 Promise 对象，这是问题的一部分。

ReactJS + Redux + Reduc-thunk 无法发送承诺

ReactJS + Redux + Reduc-thunk Can't dispatch promise

reactjs

redux

jsx

redux-thunk