2017-10-28 95 views
1

我不知道是怎麼回事,我在正確使用這種技術陣營原住民,但不會工作,ReactJSapplyMiddleware()被忽略?終極版-的thunk永遠不會觸發回調,終極版,記錄器將無法登錄,一切都做得正確

控制檯只記錄'外部',從不'內部',也不提供重新記錄日誌。

應用程序入口點:

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

回答

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

我不是致電 thunk動作的創造者。

0

一切都在你的代碼別人看起來不錯,但我不太確定這部分:

return async (dispatch) => { 

嘗試改變,爲:

return (dispatch) => {