React Redux action not entering into dispatch

Question

I have seen some similar questions to this one, but I'm not entirely sure if I understand how mapDispatchToProps, bindActionCreators and connect work and so am unsure where I'm going wrong.

At the moment, my recordFullTimeScoreAnswer function is being called, but when it enters the function nothing happens after the return line. The console.log is not printed and there aren't any errors

Component

renderNextQuestionArrow(question: Question) {
        const p = this.props;
        const s = this.state;

        return (
            <div onClick={ () => { p.recordFullTimeScoreAnswer(s.homeScore, s.awayScore, p.question, p.questionIndex, p.user, p.configs) } }>
                <Arrow direction="right" action={ () => { p.showNextQuestion() } }/>
            </div>
        )
    }

Container

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { recordFullTimeScoreAnswer, showNextQuestion } from '../actions';

render() {
    return(
        <FullTimeScoreActive
                imgSrc={imgSrc}
                user={user}
                answerStatus={answerStatus}
                question={question}
                showNextQuestion={showNextQuestion}
                recordFullTimeScoreAnswer={recordFullTimeScoreAnswer}
                questionIndex={questionIndex}
                total={total}
                configs={configs}
            />
    )
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ recordFullTimeScoreAnswer, showNextQuestion }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(FullTimeScoreContainer);

export { FullTimeScoreContainer }

Action

export function recordFullTimeScoreAnswer(
    homeScore: number,
    awayScore: number,
    question: Object,
    questionIndex: number,
    user: User,
    configs: Configs
) {
    console.log("outside record answer");
    return (dispatch: Function) => {
        console.log("inside record answer");

        let uri = configs.baseAPIPath + '/questions/';

        if ( user.loggedIn ) {
            fetchWithAuth(uri, 'POST', answer, user.tokens, configs.clientId, dispatch, false, v.questionId).then( (data) => {
                if (data) {
                    dispatch({
                        type: RECORD_ANSWER_SUCCESS,
                        payload: { questionIndex, answerId }
                    })
                }
            });
        }
    }
}

The last thing I see is the "outside record answer" log but never the "inside record answer" one

Mayank Shukla · Accepted Answer · 2018-02-13 12:18:40Z

3

Issue is in this line:

recordFullTimeScoreAnswer = { recordFullTimeScoreAnswer }

Here you are directly passing the action defined inside the action file, not the one which was passed to component in props by mapDispatchToProps method, In you case you are always calling the outer method, inner method never got called, also recordFullTimeScoreAnswer will not get the access of dispatch.

Use this:

recordFullTimeScoreAnswer={this.props.recordFullTimeScoreAnswer}

Note:

The way you wrote will print the inner console if you write it like this:

recordFullTimeScoreAnswer = {recordFullTimeScoreAnswer()}      // notice `()`

But it will throw the error also.

edited Feb 13, 2018 at 12:18

answered Feb 13, 2018 at 12:07

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jSutcliffe90 Over a year ago

Thank you so much, I have been working on that all morning and was getting nowhere!

Collectives™ on Stack Overflow

React Redux action not entering into dispatch

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related