React-Redux connect not working

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>
    );
  }
}

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/>

I had same problem, I resolve it below !

First, you should export connect output object like below ↓

class Tmap extends Component { ... }

export default connect(mapStateToProps)(Tmap);

then, and then in routes add exported object instead of class, like ↓

import TmapConnectOutput from './Components/Tmap';
export const routes = <Layout>
    <Route exact path='/Tmap' component={TmapConnectOutput as any} />
</Layout>;

Tags:

React Redux