Javascript 如何使用Redux Promise中间件链接操作？

我是一个新的反应和重复。我希望使用链接多个API调用，并按如下方式实现我的操作：

locationActions.js：

import { visitLocation } from '../services/actionService';

export const VISIT_LOCATION = 'VISIT_LOCATION';
export const VISIT_LOCATION_PENDING = 'VISIT_LOCATION_PENDING';
export const VISIT_LOCATION_FULFILLED = 'VISIT_LOCATION_FULFILLED';
export const VISIT_LOCATION_REJECTED = 'VISIT_LOCATION_REJECTED';

const visitLocationAction = (characterId, location) => ({
    type: VISIT_LOCATION,
    // visitLocation returns a new promise
    payload: visitLocation(characterId, location)
});

export { visitLocationAction as visitLocation };

我使用

mapDispatchToProps

从我的React组件分派此操作：

const mapDispatchToProps = dispatch => (
    bindActionCreators({ visitLocation }, dispatch)
);

这管用！但是，我想在解决并完成

visitLocation

后发送另一个操作。我无法调用

Promise.then（）

，因为它不提供

dispatch

方法，因此无法将我的操作“绑定”到还原程序

教程提到我应该调用

dispatch（secondAction（））

，但我的action creators中没有可用的dispatch

有人能告诉我我错过了什么吗

编辑：

正如第一个答案中所建议的，我尝试了以下方法：

import { visitLocation } from '../services/locationService';
import { fetchSomething } from '../services/otherService';

const visitLocationAction = (characterId, location) => {
    return (dispatch) => {
        return dispatch(visitLocation(characterId, location))
            .then(() => dispatch(fetchSomething()));
    };
};

export { visitLocationAction as visitLocation };

但我得到了行动：未定义和以下错误：

Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (redux.js:200)
    at redux-logger.js:1

---

如的文档中所述，中间件可以与链操作创建者相结合

所以你可以写下你的动作，比如：

const secondAction=（数据）=>({
键入：“第二个”，
有效载荷：{…}，
})
常数thirdAction=（数据）=>({
类型：“第三”，
有效载荷：{…}，
})
const firstAction=（）=>{
返回（发送）=>{
返回访问位置（字符、位置）
.然后（（数据）=>调度（第二个操作（数据）））
.然后（（数据）=>调度（第三次（数据）））
}
}

教程提到我应该调用

dispatch（secondAction（））

，但我的action creators中没有可用的dispatch

让我先回答你问题的这一部分。正如第一个答案中提到的，您需要一个中间件来在动作创建者中使用

dispatch

默认情况下，Redux操作创建者返回的纯对象如下：

const returnsAnObject = () => ({
  type: 'MY_ACTION'
  payload: ...,
  meta: ....
})

使用Redux Thunk，动作创建者基本上可以返回函数。返回函数的函数称为“thunk”，因此称为Redux thunk

const returnsAFunction = (dispatch) => dispatch({
  type: 'MY_ACTION'
  payload: ...,
  meta: ....
})

在Redux Thunk的特定情况下，返回

dispatch

函数。Redux Thunk使您能够返回

分派

，方法是将其作为参数提供给动作创建者

但是我得到了动作：未定义

让我们把这个打开。我们知道——多亏了Redux Thunk——您可以使用

dispatch

将多个操作链接在一起。但是，正如您在编辑的问题中提到的，您仍然会遇到“普通对象”错误

这是因为您使用承诺对象而不是普通对象调用了

dispatch

const visitLocationAction = (characterId, location) => {
    return (dispatch) => {
        return dispatch(visitLocation(characterId, location))

            // Yes, it is correct to call dispatch here
            // However, `dispatch` accepts plain objects, not Promise objects
            .then(() => dispatch(fetchSomething()));
    };
};

要解决此问题，只需修改第二次分派以使用普通对象：

const visitLocationAction = (characterId, location) => {
    return (dispatch) => {
        return dispatch(visitLocation(characterId, location))
            .then(() => dispatch({
                type: 'VISIT_LOCATION_SECOND_TIME'
                payload: fetchSomething()
            }));
    };
};

---

嗨，谢谢你的回答。但我不确定如何传递动作类型。查看我编辑的问题。是否添加了redux thunk？是的，它包含在my store.js配置中：

applyMiddleware（thunk，promiseMiddleware（），logger）

尝试从

applyMiddleware

中删除

promiseMiddleware

。但我将此中间件用于所有其他获取操作！否则，我所有的减速器都会停止工作。。。

const visitLocationAction = (characterId, location) => {
    return (dispatch) => {
        return dispatch(visitLocation(characterId, location))
            .then(() => dispatch({
                type: 'VISIT_LOCATION_SECOND_TIME'
                payload: fetchSomething()
            }));
    };
};