Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dispatched undefined action #91

Closed
FullStackForger opened this issue Sep 1, 2016 · 1 comment
Closed

dispatched undefined action #91

FullStackForger opened this issue Sep 1, 2016 · 1 comment

Comments

@FullStackForger
Copy link

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}
@FullStackForger
Copy link
Author

Problem solved! Order in which I am applying middleware matters.
As suggested by stackoverflow answer I had to update store creator code.

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

corysmc added a commit to corysmc/stencil-redux that referenced this issue Jun 27, 2018
Changing the order fixes an “undefined action” that get’s logged - see
this issue
reduxjs/redux-thunk#91
corysmc added a commit to corysmc/stencil-redux-demo that referenced this issue Jun 27, 2018
Changing the order fixes an “undefined action” that get’s logged - see
this issue
reduxjs/redux-thunk#91
@reduxjs reduxjs deleted a comment from ayech0x2 Feb 23, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant