javascript - 我如何使用 Redux Promise 中间件链接操作？

Question

我对 React 和 Redux 还很陌生。我想使用 redux-promise-middleware 链接多个 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 组件分派(dispatch)此操作:

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

这行得通!但是，我想在 visitLocation 完成后发送另一个 Action 。我无法调用 Promise.then()，因为它不提供 dispatch 方法，因此不会将我的操作“绑定(bind)”到 reducer。

教程提到我应该调用 dispatch(secondAction()) 但我的 action creator 中没有可用的 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 };

但是我得到了 action:undefined 和以下错误:

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

Answer 1

Tutorials mention I should call dispatch(secondAction()) but I do not have dispatch available in my action creators.

让我先回答你这部分的问题。如第一个答案中所述，您需要 Redux Thunk ，一个中间件，用于在您的操作创建者中使用 dispatch。

默认情况下，Redux Action 创建者返回这样的普通对象:

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 使您能够返回 dispatch，方法是将它作为参数提供给您的操作创建者。

But I got action:undefined

让我们打开包装。我们知道——感谢 Redux Thunk——您可以使用 dispatch 将多个操作链接在一起。但是，正如您在编辑后的问题中提到的那样，您仍然会收到“普通对象”错误。

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

这是因为您使用 Promise 对象而不是普通对象调用了 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()));
    };
};

要解决此问题，只需修改您的第二个分派(dispatch)以使用普通对象:

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