Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий. [ДЕЙСТВУЮЩАЯ РЕАГИРОВАНИЕ]

Question

Я получаю эту ошибку. Это первый раз, когда я использую промежуточное программное обеспечение Thunk. И я застрял в этом.

ХРАНИТЬ:

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import expensesReducer from '../reducers/expenses';
import filtersReducer from '../reducers/filters';
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default () => {
  const store = createStore(
    combineReducers({
      expenses: expensesReducer,
      filters: filtersReducer
    }),
    composeEnhancers(applyMiddleware(thunk))
  );

  return store;
};

ДЕЙСТВИЕ:

export const startSetExpenses = () => {
  return (dispatch) => {
    return database.ref('expenses').once('value').then((snapshot) => {
      const expenses = [];

      snapshot.forEach((childSnapshot) => {
        expenses.push({
          id: childSnapshot.key,
          ...childSnapshot.val()
        });
      });

      dispatch(setExpenses(expenses));
    });
  };
};

РЕДУКТОР:

// Expenses Reducer

const expensesReducerDefaultState = [];

export default (state = expensesReducerDefaultState, action) => {
  switch (action.type) {
    case 'SET_EXPENSES':
      return action.expenses;
    default:
      return state;
  }
};

Я использую "redux-thunk": "^2.2.0".

Любая помощь будет высоко ценится. Благодарю вас.