我不知道是怎麼回事,我在正確使用這種技術陣營原住民,但不會工作,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
}
}