React-Redux and Chart.js props Do not rerender

Question

I am fairly new to React-Redux, and am building an application that dynamically updates charts (from react-chartjs) based on checkboxes which the user clicks. (see link to github repo below!)

my problem comes when it is time to update the props, which contain data that the charts use to display information. Here is what it does correctly:

1.fires off an action: Home.js

<div class="checkbox">
                        <label>
                            <input type="checkbox" value="journal" onClick={this.props.updateRadar.bind(null, this.props.charts)}> Journals </input>
                        </label>
                    </div>

2. the correct reducer is called:

3. the state is updated within the reducer (charts data structure is deeply nested, so I use the react.addons.update() method ) : reducers/charts.js

   switch(action.type) {
           case 'UPDATE_RADAR' :
                   var radardata = [0,0,0,0,0,0,0];
                   var labels = ["January", "February", "March", "April", "May", "June", "July"]
   
   
               return  update(state, {
                   radar: {
                       datasets: {
                           0: {
                               data: {$set: radardata }
                           }
                       }
                   }
               })
   
           default:
               return state;
   
       }
   

   }

4. The Redux state is updated, reflecting the changes (checked via the Redux Devtools):

I put a ComponentWillRecieveProps within my component and used console.log to examine the contents of nextProps, and nextProps also shows the updated changes. elements/SpiderGraph.js:

componentWillReceiveProps: function(nextProps) {
        console.log(nextProps);

    },

However, when I go into the React devtool and dig to the prop that should be changed, there is no reflected changes, just the old data:

I have correctly mapped the statetoprops function with the the correct data (at least I think I have). app.js:

function mapStateToProps(state) {

    return {
        charts: state.charts


}

}

I just cant figure out what I'm missing.

A link to the current github project can be found At this link

If anyone can take a gander at it, as I have run out of ideas about what I could possibly be doing wrong. If you have any questions or concerns for me, please do not hesitate to ask!

Very respectfully Robbie

Answer 1

I think it's not redux/react propblem. In console you will propably see this error: "Cannot read property 'length' of undefined - core.js" . If you delete 'RadarChart' component, and then change parameter "radar" to "bar" in reducer. You'll see that 'BarChart' works. Or another variant : you may add "redraw" prop to 'RadarChart' component.

link : https://github.com/jhudson8/react-chartjs/issues/80