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

Question

I'm implementing get all image by type with redux-saga. I have 2 types, let's say, type kristik and type motif. When I'm implementing type kristik, it got successful response, but when it comes to type motif, the response is error.

here my code that has the error in console

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

        dispatch(getAllMotif());
    }

I got error in dispatch(getAllMotif()); in commponentWillMount()

Here my getAllMotif() code

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

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

Here my sagas getAllMotif code

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

here my reducer

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

here my request code

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

I don't know why in this type get error, because in type kristik also have very similar code.

Answer 1

You didn't dispatch an action that wasn't a plain object, your function getAllMotif not return a plain object. That lead to the error here.

You should dispatch an normal action

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

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

Then in in saga, you catch this action and handle it with your saga function

takeLatest('GET_ALL_MOTIF', getAllMotif);