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

Question

我正在使用 redux-saga 实现按类型获取所有图像。 我有 2 种类型，比如说，类型 kristik 和类型主题。 当我实现类型 kristik 时，它得到了成功的响应，但是当涉及到类型主题时，响应是错误的。

这里我的代码在控制台中有错误

    componentWillMount() => {
        const { dispatch } = this.props;

        dispatch(getAllMotif());
    }

我在dispatch(getAllMotif()); 在commponentWillMount()

这是我的getAllMotif()代码

    getAllMotif(token) {
        const path = `motif`;
        const method = 'get';

        return request.process(method, path, null, token);
    },

这是我的sagas getAllMotif代码

export function* getAllMotif() {
    try {
        let { detail } = yield select(state => state.user);

        const result = yield call(API.getAllMotif, detail.api_token);
        yield put({
            type: types.GET_ALL_MOTIF_SUCCESS,
            payload: result,
        });
    } catch (err) {
        yield put(handleError(err));

        yield put({
            type: types.GET_ALL_MOTIF_FAILURE,
            payload: err,
        });
    }
}

这是我的减速机

            case types.GET_ALL_MOTIF_SUCCESS:
            return {
                ...state,
                motif: [
                    ...action.payload.data.data
                ]
            };  

这是我的请求代码

internals.process = (method, path, payload, token, contentType=internals.contentType) => {
    const request = {
        url: `${API_URL}/${path}`,
        method: method,
        headers: {
            'Content-Type': contentType,
            'Accept': 'application/json',
        },
    };

    if (token) {
        request.params = {
            token: token,
        };
    }

    if (payload) {
        request.data = payload;
    }

    return axios.request(request)
        .then(res => {
            if (![200, 201].includes(res.status)) {
                throw new Error(res.status);
            }

            return res.data;
        })
        .catch((error) => {
            console.error(method, path, error);
            return Promise.reject({
                message: error.response.data.error,
                code: error.response.status
            });
        });
};

我不知道为什么在这种类型中会出错，因为在类型 kristik 中也有非常相似的代码。

Answer 1

您没有发送不是普通 object 的操作，您的 function getAllMotif没有返回普通 object。 这导致了这里的错误。

你应该派发一个正常的动作

getAllMotifAction(token) {
    const path = `motif`;
    const method = 'get';

    return { type: 'GET_ALL_MOTIF', data: { path, method } };
},

然后在 saga 中，你抓住这个动作并用你的 saga function 处理它

takeLatest('GET_ALL_MOTIF', getAllMotif);