redux thunk不起作用 - action应该是一个使用自定义中间件的对象

Question

任何人都可以帮我弄清楚我做错了什么吗？我不断得到的动作应该是一个对象使用自定义中间件错误。如果我尝试像fetchAdmins（）上的{type：'SOMETHING'}那样返回它，但是根据redux-thunk文档，我应该能够返回一个派遣作为params的函数，这就是我所做的但是也许我错过了什么。

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

减速器-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;
}

非常感谢！

Answer 1

导致问题的不是你的行动创造者......我相信问题在于你的mapDispatchToProps

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

请注意，您正在从状态映射函数返回一个对象，但在您的调度中，您将返回bindActionCreators的结果，该结果可以是对象或函数...

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

然后

以this.props.actions.fetchAdmins（）;

的身份访问您的方法