redux thunk won't work - actions should be an object use custom middleware

Question

Can anyone help me figure out what I'm doing wrong? I keep getting actions should be an object use custom middleware error. It works if I try to return like { type: 'SOMETHING' } on the fetchAdmins(), but according to the redux-thunk docs I should be able to return a function that has dispatch as params and that's what I did but maybe I missed something.

store.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import allReducers from './js/reducers/index.js';

const Store = (initialState) =>
            createStore(
                allReducers,
                initialState,
                applyMiddleware(thunk)
            );
export default Store;

RootAdmin.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Route } from 'react-router-dom';
import { fetchAdmins, addAdmin, deleteAdmin } from '../actions/actions.js';

@connect(
    state => ({
        admins: state.admins
    }),
    dispatch => bindActionCreators({
        fetchAdmins: fetchAdmins,
        addAdmin: addAdmin,
        deleteAdmin: deleteAdmin
    }, dispatch)
)

class RootAdmin extends Component {
    // ...codes
    componentDidMount() {
        this.props.fetchAdmins();
    }
    // ...codes
  }
};

export default RootAdmin;

actions.js

import axios from 'axios';

export function fetchAdmins() {
    console.log('fired'); // this gets fired.
    return (dispatch) => {
        console.log('not fired'); // not fired.
        dispatch({ type: 'FETCHING_ADMINS' });
        console.log('fetching'); // won't even log
        axios({
            url: '/api/fetchAdmins'
        })
        .then(res => 
            dispatch({ type: 'FETCHED_ADMINS', payload: res.data })
        )
        .catch(err => 
            dispatch({ type: 'FAILED_FETCH_ADMINS' })
        );
    };
}

reducer-admins.js

export default function (state = null, action) {
  const { payload } = action;
  let newState = {...state};
  switch (action.type) {
    case 'FETCHING_ADMINS':
        newState = {...payload};
        newState.log += '\nfetching admins';
        console.log('fetching admins');
      return newState;
      break;
  }
  return state;
}

Thank you very much!

Joshua Underwood Joshua Underwood · Accepted Answer · 2017-11-08T18:19:12

It's not your action creator causing the issue... I believe the issue lies in your mapDispatchToProps

@connect(
    state => ({
        admins: state.admins
    }),
    dispatch => bindActionCreators({
        fetchAdmins: fetchAdmins,
        addAdmin: addAdmin,
        deleteAdmin: deleteAdmin
    }, dispatch)
)

Note that you're returning an object from the state mapping function, but in your dispatch you're returning the result of bindActionCreators which can be an object or a function...

@connect(
    state => ({
        admins: state.admins
    }),
    dispatch => ({
        actions: bindActionCreators(Object.assign({}, fetchAdmins, addAdmin, deleteAdmin), dispatch)
    })
)

then access your method as this.props.actions.fetchAdmins();