React-Redux connect not working

Question

I am trying to use React+Redux in my codepen pen, but the connect is not injecting the prop,

Maybe its because being an amateur, I'm missing something. Please have a look. http://codepen.io/sahil28v/pen/EKEKME?editors=0010

const { Component } = React;
const { createStore, bindActionCreators, applyMiddleWare, combineReducers } =     Redux;
const { Provider, connect } = ReactRedux;

const Application = () =>  (
        <div className="ground">
    <Tmap />
        </div>
    );

class Tmap extends Component {
  constructor(props){
  super(props);
  console.log(this.props.mapstate);  // This is returning undefined,no idea why
  console.log(store.getState().mapstate); // Though this returns val: "hey" as it should properly though.
 }
 render () {
  return (
   <div>

   </div>
  );
 }
}

const mapStateToProps = (state) => ({
mapstate: state.mapstate
});

connect(mapStateToProps)(Tmap);

const initialState = {
  val: "hey"
}

const mapReducer = (state = initialState, action) => {
 return state ;
} ;

const rootReducer = combineReducers({
  mapstate: mapReducer,
});

const store = createStore(rootReducer);

React.render(
    <Provider store={store}>
        <Application />
    </Provider>, document.getElementById('app')
);

Also,,, can I configure store over here in codepen itself for using redux devtools(chrome extension). I tried adding ...window.devToolsExtension ? window.devToolsExtension() : f => f , to the create store but that doesn't work.

While somebody is answering -- can you also recommend good documentation/video for: ->learning ES6 ...

-- Thanks for the help

Answer 1

Connect returns a new instance of the component I suppose. This works, using connect as a decorator.

@connect(
  state => ({
    mapstate: state.mapstate 
  })
)
class Tmap extends Component {
  constructor(props){
    super(props);
    alert(this.props.mapstate);  // This is returning undefined,no idea why
    alert(store.getState().mapstate); //As I understand this is the direct low level api which connect is meant to abstract away along with store.subscribe.
  }

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

Answer 2

You have forgotten to save the result of connect into a new variable. And this new variable is what you should use instead of Tmap.

const CTmap = connect(... 
.... 
<CTmap/>