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

Question

我不知道这里发生了什么，我在 React Native 中正确使用了这项技术，但在 ReactJS 中不起作用

控制台只记录 'Outside' 而从不记录 'Inside'，也没有提供 redux 日志。

应用入口点：

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();

像这样导出根组件：

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

而且我正确地调用了的 componentDidMount():

中的操作

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

从未激活的示例 thunk:

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

示例减速器：

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

您代码中的其他所有内容看起来都不错，但我对这部分不太确定：

return async (dispatch) => {

尝试将其更改为：

return (dispatch) => {

Answer 2

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

我不是打电话给 thunk 动作创作者。

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

applyMiddleware() ignored? redux-thunk never fires callback, redux-logger won't log, everything done right

reactjs

redux

redux-thunk

react-redux