Redux React Highcharts (Highmaps) issue passing map config from app state

Technologies used: Redux, React, React-Highcharts (Highmaps)

Disclaimer: First Redux application, be nice please...

Status: I am sure there are some issues with my redux set up, but through console testing I can see that my onClick function is correctly triggering the dispatch and updating my state. (Basically a toggle between the visibility of map points).

Issue: I need to set up the configuration of my map to come from my application state. But when I try to pass it as props I am getting errors. I have tried multiple ways but to no avail.

Here is what I have tried:

1:

class Test extends React.Component {


render() {
    console.log(this.props.mapConfig + + 'action')
    return (
        <div id="container">
            <ReactHighmaps config={this.mapConfig} ref="chart" />
            <Buttons style="success" classN="btn btn-secondary" text="test" onButtonClick={()=> this.props.showPoints( )} />

        </div>
    )
}

}

function mapStateToProps(state){
  return {
    mapConfig: state.mapConfig  }
};

error:

ReactHighmaps.src.js:1538 Uncaught Error: Config must be specified for the HighchartsMap component
at Object.renderChart (ReactHighmaps.src.js:1538)
at Object.componentDidMount (ReactHighmaps.src.js:1571)
at Object.chainedFunction [as componentDidMount] (ReactHighmaps.src.js:1181)
at commitLifeCycles (react-dom.development.js:8778)
at commitAllLifeCycles (react-dom.development.js:9938)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at invokeGuardedCallback (react-dom.development.js:436)
at commitRoot (react-dom.development.js:10042)
at performWorkOnRoot (react-dom.development.js:10966)
at performWork (react-dom.development.js:10916)
at requestWork (react-dom.development.js:10832)
at scheduleWorkImpl (react-dom.development.js:10715)
at scheduleWork (react-dom.development.js:10677)
at scheduleTopLevelUpdate (react-dom.development.js:11140)
at Object.updateContainer (react-dom.development.js:11178)
at react-dom.development.js:15190
at Object.unbatchedUpdates (react-dom.development.js:11049)
at renderSubtreeIntoContainer (react-dom.development.js:15189)
at Object.render (react-dom.development.js:15254)
at Object../src/index.js (index.js:13)
at __webpack_require__ (bootstrap 64aa9ab7ac8df7b9e8db:669)
at fn (bootstrap 64aa9ab7ac8df7b9e8db:87)
at Object.0 (index.css?ce69:26)
at __webpack_require__ (bootstrap 64aa9ab7ac8df7b9e8db:669)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 64aa9ab7ac8df7b9e8db:715)
at bundle.js:719

2:

<ReactHighmaps config={this.props.mapConfig} ref="chart" />

error: Highmaps box is there with title and logo at bottom but no chart showing

3:

<ReactHighmaps config={this.props.state.mapConfig} ref="chart" />

error:

Uncaught TypeError: Cannot read property 'mapConfig' of undefined
at Test.render (map_container.js:21)
at finishClassComponent (react-dom.development.js:7882)
at updateClassComponent (react-dom.development.js:7859)
at beginWork (react-dom.development.js:8233)
at performUnitOfWork (react-dom.development.js:10215)
at workLoop (react-dom.development.js:10279)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at invokeGuardedCallback (react-dom.development.js:436)
at renderRoot (react-dom.development.js:10357)
at performWorkOnRoot (react-dom.development.js:10963)
at performWork (react-dom.development.js:10916)
at requestWork (react-dom.development.js:10832)
at scheduleWorkImpl (react-dom.development.js:10715)
at scheduleWork (react-dom.development.js:10677)
at scheduleTopLevelUpdate (react-dom.development.js:11140)
at Object.updateContainer (react-dom.development.js:11178)
at react-dom.development.js:15190
at Object.unbatchedUpdates (react-dom.development.js:11049)
at renderSubtreeIntoContainer (react-dom.development.js:15189)
at Object.render (react-dom.development.js:15254)
at Object../src/index.js (index.js:13)
at __webpack_require__ (bootstrap 87cb00105f31648d28ed:669)
at fn (bootstrap 87cb00105f31648d28ed:87)
at Object.0 (index.css?ce69:26)
at __webpack_require__ (bootstrap 87cb00105f31648d28ed:669)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 87cb00105f31648d28ed:715)
at bundle.js:719

Github Repo

In addition to what @JosanIracheta has noticed in comment there is also a problem in PointsMapConfig reducer. SHOW_POINTS action overrides mapConfig property instead of extending it. So please try this:

const PointsMapConfig = (state = initialState, action) => {
  switch (action.type){
    case SHOW_POINTS:
      return {
        ...state,
        mapConfig:  {
          ...state.mapConfig,
          series: [
              ...state.mapConfig.series.filter((el, index) => index !== 2), {
              ...state.mapConfig.series[2],
              visible: true
            }
          ]
        }
      }
    default:
      return state;
  }
}

Next problem is in mapStateToProps. To access state property you have to use name of key at which reducer was mounted so please use this:

function mapStateToProps(state){
  return {
    mapConfig: state.mapConfig.mapConfig 
  };
};