Redux-Thunk 错误：操作必须是普通对象。 使用自定义中间件进行异步操作

Question

我有一个以 firebase 作为后端的歌本应用程序，并且遇到了错误：操作必须是普通对象。 使用自定义中间件进行异步操作。

动作创建者

export const createAction = (type, payload) => ({ type, payload });

歌曲.action.js

import { getSongsAndDocuments } from '../../utils/firebase/firebase.utils';

export const fetchSongsStart = () => {
    createAction(SONGS_ACTION_TYPES.FETCH_SONGS_START);
};

export const fetchSongsSuccess = songs => {
    createAction(SONGS_ACTION_TYPES.FETCH_SONGS_SUCCESS, songs)
};

export const fetchSongsFailed = error => {
    createAction(SONGS_ACTION_TYPES.FETCH_SONGS_FAILED, error);
};

export const fetchSongsAsync = () => {
    return async dispatch => {
        dispatch(fetchSongsStart());

        try {
            const songs = await getSongsAndDocuments();
            dispatch(fetchSongsSuccess(songs));
        } catch (error) {
            dispatch(fetchSongsFailed(error));
        }
    };
};

歌本.jsx

const dispatch = useDispatch();

useEffect(() => {
        dispatch(fetchSongsAsync());
    }, []);

store.js

import { compose, createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import { rootReducer } from './root-reducer';

const middleWares = [thunk];

const composeEnhancer =
    (process.env.NODE_ENV !== 'production' && window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
    compose;

const composedEnhancers = composeEnhancer(applyMiddleware(...middleWares));

export const store = createStore(rootReducer, undefined, composedEnhancers);

Answer 1

您必须在动作创建者函数中返回调用createAction函数的结果，即：

return createAction(SONGS_ACTION_TYPES.FETCH_SONGS_START);

代替：

createAction(SONGS_ACTION_TYPES.FETCH_SONGS_START);