Redux reducers not being called when using dispatch() in Component

Question

I'm pretty new to react/redux (and javascript in general) so please bear with me on my use of the terminology here...

I am trying to understand how Components and Reducers work so currently I am practicing on a small app that I mostly copied/pasted from a tutorial. The issue I am having is that I am trying to dispatch an action from my Component which alters the Redux state but I am not even seeing my console.log() messages inside my reducer function(s) when I dispatch an action from my Component.

This is what I currently have:

TwApp.js

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { TWAPP_USERDATA_AUTH_TOKEN } from '../Constants'
import { loginSuccess } from '../actions'


class TwApp extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.handleRefreshClick = this.handleRefreshClick.bind(this)
    }

    componentDidMount() {
        console.log("TwApp componentDidMount")
        this.props.loginSuccess() // This is where I want to dispatch an action
    }

    componentDidUpdate() {
    }

    handleChange() {
    }

    handleRefreshClick(e) {
        e.preventDefault()
        this.props.loginSuccess()
    }

    render() {
        const { loggedIn } = this.props;
        console.log("Rendering TwApp.")

        if (!loggedIn) {
            console.log("user not logged in. loggedIn = " + loggedIn)
        }
        else {
            return (
                <div>
                    <p>Success</p>
                </div>
            )
        }

    }
}


function mapStateToProps(state) {
    // nothing for now
}

function mapDispatchToProps(dispatch) {
    return {
        loginSuccess: () => { dispatch(loginSuccess) }
    }

}

export default connect(mapStateToProps, mapDispatchToProps)(TwApp)

actions.js

export const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS'

export function loginSuccess() {
    return {
        type: USER_LOGIN_SUCCESS,
    }
}

reducers.js

 // Contains a bunch of stuff that isn't being used yet
import { combineReducers } from 'redux'
    import {
        USER_LOGIN_SUCCESS, INVALIDATE_SUBREDDIT,
        REQUEST_POSTS, RECEIVE_POSTS
    } from './actions'



    function reducer1(state = {}, action) {
        console.log("reducer1: state =" + JSON.stringify(state) + ", action = " + JSON.stringify(action))
        switch (action.type) {
            case USER_LOGIN_SUCCESS:
                console.log("Reducer USER_LOGIN_SUCCESS")
                state.loggedIn = true
                return state
            case RECEIVE_POSTS:
            case REQUEST_POSTS:

            default:
                return state
        }
    }

    function reducer2(state = {}, action) {
        console.log("reducer2: state =" + JSON.stringify(state) + ", action = " + JSON.stringify(action))

        switch (action.type) {
            case INVALIDATE_SUBREDDIT:
            case RECEIVE_POSTS:
            case REQUEST_POSTS:
            default:
                return state
        }
    }


    const rootReducer = combineReducers({
        reducer1,
        reducer2
    })

    export default rootReducer

Neither reducer1's nor reducer2's console.log() message appears in console. When I call dispatch() from my TwApp component, do all reducers (reducer1 and reducer2) get called? Am I misunderstanding something?

Thanks

schapke schapke · Accepted Answer · 2019-05-17T02:42:07

You are dispatching 'loginSuccess' which is a function, or by redux terms an action creator.
You should dispatch actions, which are plain objects, to your reducers.

What you want to do is dispatch the action that loginSuccess will create for you:

loginSuccess: () => { dispatch(loginSuccess()) }

Redux reducers not being called when using dispatch() in Component

2 Answers