applyMiddleware() 被忽略了？ redux-thunk 从不触发回调，redux-logger 不会记录，一切都做对了

Question

I have no idea what's going on here, I am using this technique correctly in React Native but won't work in ReactJS

Console just logs 'Outside' and never 'Inside', also no redux log is provided.

Application entry point:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { authStateReducer } from './reducers/auth.js'
import { wishesStateReducer } from './reducers/wishes.js'

const root = combineReducers({ 
    auth: authStateReducer,
    wishes: wishesStateReducer
})

let store = createStore(root, applyMiddleware(thunk, logger))

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);
registerServiceWorker();

Exporting root component like this:

function stateToProps(state) {
  return { AUTH: state.auth, WISHES: state.wishes }
}

function dispatchToProps (dispatch) {
  return {
    registerAuthStateListener: () => { dispatch(registerAuthStateListener) }, 
    fetchWishes: () => { dispatch(fetchWishes) }
  }
}

export default connect(
  stateToProps,
  dispatchToProps
)(App);

And I am correctly calling the actions in 's componentDidMount():

  componentDidMount () {
    this.props.registerAuthStateListener()
    this.props.fetchWishes()
  }

Example thunk that is never activated:

import firebase from 'firebase'

export function fetchWishes () {
    console.log("Outside")
    return async (dispatch) => {
        console.log("Inside")
        let querySnapshot = await firebase.firestore().collection('wishes').get()


        let newState = []

        querySnapshot.forEach((wish) => {
            newState.push({
                id: wish.id,
                ...wish.data()
            })
        })

        dispatch({
            type: 'WISHES_FETCHED',
            data: newState
        })
    }
}

Example reducer:

const INITIAL_WISHES_STATE = {
    wishes: []
}

export function wishesStateReducer (state = INITIAL_WISHES_STATE, action) {
    switch (action.type) {
        case 'WISHES_FETCHED':
            return {
                wishes: action.data
            }

        default:
            return state
    }
}

Answer 1

function dispatchToProps (dispatch) {
  return {
    registerAuthStateListener: () => { dispatch(registerAuthStateListener()) }, 
    fetchWishes: () => { dispatch(fetchWishes()) }
  }
}

I wasn't calling the thunk action creators.

Answer 2

Everything else in your code looks good but I'm not too sure about this part:

return async (dispatch) => {

Try changing that to:

return (dispatch) => {