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
}
}
function dispatchToProps (dispatch) {
return {
registerAuthStateListener: () => { dispatch(registerAuthStateListener()) },
fetchWishes: () => { dispatch(fetchWishes()) }
}
}
I wasn't calling the thunk action creators.