applyMiddleware（）は無視？ Reduxの-サンクは、私はここで何が起こっているか見当がつかないすべてが右

Question

行われ、Reduxの-ロガーがログに記録しません、コールバックを発射決して、私がで正しくこの技術を使用していますネイティブ反応するがReactJS

をで動作しません。コンソールは、単に「外」と「内」は決して、また何の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() 
    } 

アクティブ化されることはありません例サンク：

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

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

私はサンクアクションの作成者を呼び出してませんでした。

Answer 2

あなたのコード内の他のすべてがよさそうだが、私はこの部分についてあまりよく分からない：

：

return async (dispatch) => { 

がにそれを変更してみてください

return (dispatch) => {