React redux won't update class component's state

Question

I have a component which is supposed to update if a state from another component has been changed using redux, but it's not.

Inside mapStateToProps the correct value is being returned on redux action.

import React, {Component} from "react";
import './DashboardContent.scss';
import * as entries from '../../../assets/demo.json';

import CategoryHeader from "./CategoryHeader/CategoryHeader";
import NoContent from "../../../shared/NoContent/NoContent";
import UnsortedList from "./UnsortedList/UnsortedList";
import {connect} from "react-redux";

class DashboardContent extends Component {

    state = {
        activeCategory: this.props.activeCategory
    };

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(this.props.activeCategory)
    }

    render() {
        return (
            <div>
               ...
            </div>
        )
    }

}

const mapStateToProps = state => {
    console.log(state);
    return {
        activeCategory: state.category
    }
};

export default connect(mapStateToProps)(DashboardContent);

Dispatch inside of another component - when this is being executed, the state activeCategory of first component shall become some value:

dispatch(changeCategory('some value'))

Actions.js

// Action types
const CHANGE_CATEGORY = 'CHANGE_CATEGORY'


// Action creators
export const changeCategory = (category) => {
    return {
        type: CHANGE_CATEGORY,
        category
    }
}

Reducer.js

const initialState = {
  activeCategory: 'all'
};

export const reducer = (state = initialState, action) => {
    console.log('reducer', state, action);
    if (action.type === 'CHANGE_CATEGORY') {
        return action.category
    }
    return state;
};

does the `console.log` in `componentDidUpdate` show the new value? — pawel, Aug 14 '20 at 15:25
What happens when you add this to the main class:(class DashboardContent extends Component) { constructor() { super(); this.props = 0; } — CyberMessiah, Aug 14 '20 at 15:25
Currently you only set initial value of state to `props.activeCategory`. Use the `componentDidUpdate` to check for new props and update the state there, or use `getDerivedStateFromProps` instead, with the same purpose. — kbo, Aug 14 '20 at 15:32
@kbo `componentDidUpdate` won't run when the redux state is being updated. — Tom, Aug 14 '20 at 15:38
I would try `getDerivedStateFromProps` then, since it fires on every prop change. — kbo, Aug 14 '20 at 15:42

score 0 · Answer 1 · answered Aug 14 '20 at 15:31

0

Your reducer should return the updated state instead it returns action.category atm.

export const reducer = (state = initialState, action) => {
  console.log('reducer', state, action);
  if (action.type === 'CHANGE_CATEGORY') {
   return {...state,category:action.category}; 
  }
  return state;
};

answered Aug 14 '20 at 15:31

Çağatay Sel

801
7
14

This returns an object inside of `mapStateToProps`, which is good, but I'm smh still not able to access it from inside of the component. – Tom Aug 14 '20 at 15:47
Does the console.log(state) in mapStateToProps show the updated category in the state. If so you should be able to access it with this.props.activeCategory. – Çağatay Sel Aug 14 '20 at 15:49
Yes it does but I'm not able to access it, it's odd. `const store = createStore(reducer)` - that's how I initialized it using the `Provider` from `react-redux` – Tom Aug 14 '20 at 15:52
Then what do you mean by saying you are not able to access it inside of component. What does console.log(this.props.activeCategory) inside of componentDidUpdate logs? – Çağatay Sel Aug 14 '20 at 15:53
Nothing - componentDidUpdate won't even run and rendering `this.props.activeCategory` whatsoever inside of JSX won't print anything either. – Tom Aug 14 '20 at 15:56

score 0 · Answer 2 · answered Aug 14 '20 at 15:32

0

What happens when you add this to the main class?(class DashboardContent extends Component) I believe you need to do that when you try to access the this.props.activeCategory. Try to add this snippet.

 constructor(props) { 
 super(props); 
 this.state = this.props.activeCategory;
 }

You may refer to this answer:What's the difference between "super()" and "super(props)" in React when using es6 classes?

answered Aug 14 '20 at 15:32

CyberMessiah

1,084
11
14

I'm somehow still not able to get the data from redux to my component. – Tom Aug 14 '20 at 15:46
How are you rendering it in the code? Can you paste here the JSX. – CyberMessiah Aug 14 '20 at 15:52

score 0 · Answer 3 · answered Aug 14 '20 at 15:40

0

when you are connecting a component to redux, the second argument is the dispatchToProps, is the only way you can dispatch an action inside your component

export default connect(mapStateToProps, {action1, action2,})(DashboardContent);

answered Aug 14 '20 at 15:40

aleEspinosaM

426
2
6

React redux won't update class component's state

3 Answers3