React native redux not updating props on state change

Viewed 727

My props do not update on state change. I am NOT mutating state in ANY of the reducers and everything works as it should, except my props not updating.

My main component with connect function, everything gets passed to other components through props:

const mapStateToProps = state => ({
    blocks: state.blocks,
    quizes: state.quizes,
    auth: state.auth,
    courses: state.courses,
    tasks: state.tasks
});

const mapDispatchToProps = dispatch => ({
    authActions: bindActionCreators(authActions, dispatch),
    quizActions: bindActionCreators(quizActions, dispatch),
    blockActions: bindActionCreators(blockActions, dispatch),
    courseActions: bindActionCreators(courseActions, dispatch),
    taskActions: bindActionCreators(taskActions, dispatch)
});
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(BlockList);

my quizes reducer:

// @flow
import AnyAction from "redux";
import { ActionTypes } from "./../constants";

const initialState = {
    rightAnswers: 0,
    index: 0,
    wrongAnswers: 0,
    uri: null
};

const someReduceFunction = () => {};
export default function Quizes(state = initialState, action: AnyAction) {
    switch (action.type) {
        case ActionTypes.RIGHT_ANSWER:
            return Object.assign({}, state, {
                index: state.index + 1,
                rightAnswers: state.rightAnswers + 1,
                uri: "https://www.shareicon.net/data/256x256/2016/08/20/817720_check_395x512.png"
            });
        case ActionTypes.WRONG_ANSWER:
            return Object.assign({}, state, {
                index: state.index + 1,
                wrongAnswers: state.wrongAnswers + 1,
                uri: "https://www.cpronetwork.com/media/d10b9ef5fc45ce16ba12240e263a7d8b.png?preset=m-thumb"
            });

        default:
            return state;
    }
}

quiz action:

// @flow
import { ActionTypes } from "../constants";

export const rightAnswer = () => {
    return {
        type: ActionTypes.RIGHT_ANSWER
    };
};

export const wrongAnswer = () => {
    return {
        type: ActionTypes.WRONG_ANSWER
    };
};

Quiz.js: quizActions and quizes are both passed all the way through props:

        const { navigation } = this.props;
        const { task, image, quiz, rightAction, block, quizes, quizActions } = navigation.state.params;
        const { rightAnswers, index, wrongAnswers, uri } = quizes;
        console.log(quizes);
        const current = quiz.questions[index];
        const percentage = (rightAnswers / quiz.numberOfQuestions) * 100;
.
.
.
<Button
    style={styles.button}
    label={current.option1}
    onPress={() => {
        if (current.option1 === current.rightAnswer) {
            quizActions.rightAnswer();
        } else {
            quizActions.wrongAnswer();
        }
    }}
/>

console.log(quizes) prints out the initial state. Then does not print anything.

From console.logs in action and reducer files I know the state is changing. Just the props aren't.

This might be a problem in all of my app, I'm not sure.

Edit: it updates as it should in higher components, so it's not a problem in the entire app

0 Answers
Related