Question

我是使用redux-pack的新手，但喜欢promise方法真正清理代码的方式，并使每一步都非常清晰。但是我遇到了一个问题，即承诺似乎消失了，并且错误被抛出。我的代码如下所示：

actions.js

import * as types from './action_types';
import * as services from '../services';

export const login = (email, password) ({type: types.LOGIN, promise: services.login(email, password)});

services.js

const checkResponse = (response) => {
    if (response.ok) {
        return response;
    } else {
        let error = new Error(response.statusText);
        error.response = response;
        throw error;
    }
};

export const login = (email, passowrd) => {
    let request = new Request('/login', {method: 'POST', body: {email: email, password: password}});

    return fetch('/login', request)
        .then(checkResponse)
        .then(response => response.json())
        .catch(error => error);
};

reducer.js

import handle from 'redux-pack';
import * as actions from '../actions';

const INITIAL_STATE = {
    loggedin: false,
    isworking: false,
    err: null,
};

export default function reducer(state = INITIAL_STATE, action) {
    const { type, payload } = action;

    switch (type) {

    case actions.LOGIN:
        return handle(state, action, {
            start: prevState) => ({...prevState, isworking: true, err: null}),
            finish: prevState => ({ ...prevState, isworking: false }),
            failure: prevState => ({ ...prevState, err: payload }),
            success: prevState => ({ ...prevState, loggedin: payload.ok })
        });
    default:
        return state;
    }
}

然而，当我运行此代码时，触发操作时出现以下错误：

TypeError: Object is not a function (near '...(0, _reduxPack2.default)...')

我已经使用控制台输出检测了代码，并且可以看到以下步骤直接发生在错误之前：

[Log] Login login, called +0ms (client.js, line 7245)
[Log] Login props = {"match":{"path":"/login","url":"/login","isExact":true,"params":{}},"location":{"pathname":"/login","state":{"from":"/authRoute"},"search":"","hash":"","key":"6gnu0d"},"history":{"length":72,"action":"REPLACE","location":{"pathname":"/login","state":{"from":"/authRoute"},"search":"","hash":"","key":"6gnu0d"}},"isworking":false,"loggedin":false,"err":null} +1ms (client.js, line 7245)
[Log] Login mapDispatchToProps, login dispatched. +0ms (client.js, line 7245)
[Log] actions login, called +0ms (client.js, line 7245)
[Log] services login, called. +0ms (client.js, line 7245)
[Log] actions promise = [object Promise] +2ms (client.js, line 7245)
[Log] actions action = {"type":"LOGIN","promise":{}} +0ms (client.js, line 7245)
[Log] reducer reducer called +4s (client.js, line 7245)
[Log] reducer state is: {"loggedin":false,"isworking":false,"err":null} +0ms (client.js, line 7245)
[Log] reducer action type is: "LOGIN" +0ms (client.js, line 7245)
[Log] reducer action promise is: undefined +0ms (client.js, line 7245)
[Log] reducer action payload is: undefined +0ms (client.js, line 7245)

我在reducer中的start函数中也有一些预期的输出，而且从未调用过。在上面的“登录”中是React组件，我可以看到它进行调用，道具具有预期状态，并且调度登录调用。然后我看到操作调用服务，获取生成的promise并构建完整的操作。调用reducer并且状态看起来像预期的那样，action类型是预期的，但是action的promise部分是未定义的，我怀疑这可能是导致对react-pack处理程序的调用引发错误的原因。欢迎任何关于尝试什么或在哪里看的建议！

Answer 1

我相信你的承诺在checkResponse投掷中丢失了。确保它返回拒绝的承诺，如下所示：

const checkResponse = (response) => {
    if (!response.ok) {
      let error = new Error(response.statusText);
      error.response = response;
      return Promise.reject(error);
    }
    return response;
};

使用redux-pack时，看起来Promise已经消失了

1 个答案: