CODEWITHSUNDEEP
reactjsreduxreact-reduxstore
Hovhannes Gevorgyan
Hovhannes Gevorgyan

Reputation: 552

Reactjs redux store changes but in component's props doesn't change

I'm tryin to show navigation depends on changes of categoryURL from redux store and changing the state in other components. Redux changes the store and it works fine. But in my component "this.props.categoryUrl" doesn't reflect on value. Can't find out why?

import React, {Component} from 'react';
import NavigationItems from './NavigationItems/NavigationItems';
import classes from './Navigation.module.css';
import {connect} from 'react-redux';

const mapStateToProps = state => {
    console.log(state)
    return {
        categoryURL: state.categoryUrl
    };
};

class navigation extends Component {

    componentDidMount() {
        console.log(this.props.categoryUrl);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('NAVIGATION!', this.props.categoryUrl);
    }

    render() {
        let nav = null;
        if (this.props.categoryUrl) {
            nav = (
                    <div className={classes.Navigation}>
                        <NavigationItems/>
                    </div>
            )
        }

        return (
            <>
                {nav}
            </>
        )
    }
}

export default connect(mapStateToProps, null)(navigation);

Upvotes: 0

Views: 157

Answers (1)

Jose Cabrera Zuniga
Jose Cabrera Zuniga

Reputation: 2619

In "normal" React it is needed to use <Navigation/> (Capital letter at the beginning) instead of <navigation/>. Also, If <Navigation/> is being used by another React component then it might be needed to add code that will be executed inside <Navigation/> to refresh the component where you are using <Navigation/> (some kind of callback passed to <Navigation/>). It is this the way or move all the <Navigation/>'s code to the component where you are using <Navigation/>. This is how I solved this kind of problem.

Upvotes: 1

Related Questions