IndieForger IndieForger - 3 months ago 44
React JSX Question

redux-thunk dispatch method fires undefined action

So here is the code I playing with



import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import axios from 'axios'

const initialState = {
user: {},
requesting: false,
err: null
}

const reducer = (state = initialState, action) => {
switch (action.type) {
case 'REQ_USER_INIT': return { ...state, requesting: true }
case 'REQ_USER_DATA': return { ...state, requesting: false, user: action.user }
case 'REQ_USER_ERR': return { ...state, requesting: false, err: action.err }
}
return state;
}

const logger = (store) => (next) => (action) => {
let previous = JSON.stringify(store.getState())
next(action)
console.log(
'action: ' + JSON.stringify(action) +
'\n\tprevious: ' + previous +
'\n\tcurrent: ' + JSON.stringify(store.getState())
)
}

const store = createStore(reducer, applyMiddleware(logger, thunk))

store.dispatch((dispatch) => {
dispatch({ type: 'REQ_USER_INIT' })

// Fake Online REST API for Testing and Prototyping
// break url to get an error response
let usersEndpoint = 'https://jsonplaceholder.typicode.com/users/1'

axios.get(usersEndpoint)
.then((response) => {
dispatch({
type: 'REQ_USER_DATA',
user: {
id: response.data.id,
username: response.data.username,
email: response.data.email,
}
})
})
.catch((error) => {
dispatch({
type: 'REQ_USER_ERR',
err: error.message
})
})
})


I believe it is pretty straightforward, right? I dispatch
REQ_USER_INIT
and then
REQ_USER_DATA
once the response is received. I should log two actions, however I get 3. Second action is
undefined
and I am strugling to figure out what causes it. Is it a bug with redux-thunk or am I doing something wrong?

Here is the output from my console.



action: {"type":"REQ_USER_INIT"}
·previous: {"user":{},"requesting":false,"err":null}
·current: {"user":{},"requesting":true,"err":null}
action: undefined
·previous: {"user":{},"requesting":false,"err":null}
·current: {"user":{},"requesting":true,"err":null}
action: {"type":"REQ_USER_DATA","user":{"id":1,"username":"Bret","email":"Sincere@april.biz"}}
·previous: {"user":{},"requesting":true,"err":null}
·current: {"user":{"id":1,"username":"Bret","email":"Sincere@april.biz"},"requesting":false,"err":null}


Answer

The order of middlewares matters. Try making logger last

const store = createStore(reducer, applyMiddleware(thunk, logger))
Comments