CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Regalia
Regalia

Reputation: 179

New Components in Application cannot connect to redux

I have created a small application and connected it to Redux. Unfortunately when creating new components and using the same exact code those new components cannot seem to connect to redux and get undefined when accessing it (using mapStateToProps).

I have tried to create new Components and connect them again to no avail. I'm kind of at loss as to why it isn't working especially since the rest of the application can connect and get the state properly

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
    <Provider store={store} >
        <App />
    </Provider>
, document.getElementById('root'));

store.js:

const initialState = {
  guessedTimezone: '',
  timezone: '',
  pseudo: '',
};

function rootReducer(state = initialState, action) {
  console.log(action);
  if (action.type === 'CHANGE_TIMEZONE') {
    return Object.assign({}, state, {
      timezone: action.timezone,
      guessedTimezone: action.guessedTimezone
    })
  }
  if (action.type === 'CHANGE_PSEUDO') {
    return Object.assign({}, state, {
      pseudo: action.pseudo,
      token: action.token
    })
  }
  return state;
}
export default rootReducer;

new Component not connecting:

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class TestPseudo extends Component {
  render() {
    console.log(this.props.pseudo);
    return (
      <div>
        {this.props.pseudo}
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    pseudo: state.pseudo
  }
}
export default connect(mapStateToProps)(TestPseudo)

Here for example this.props.pseudo returns undefined when, if the connection happens, it should return the value if i understand it correctly and yet it shows undefined

EDIT: App.js as per requested :

import React, { Component } from 'react'
import { connect } from 'react-redux'

import Homepage from './Components/Homepage';

import moment from 'moment';
import moment_timezone from 'moment-timezone';
import HeaderApp from './Components/HeaderApp';
import { TestPseudo } from './Components/TestPseudo';

export class App extends Component {

  async componentDidMount() {
    let tz = moment.tz.guess(true);
    let date = moment(new Date()).local();
    let timezone = date['_i'].toString().split('(')[1].split(')')[0];
    this.props.dispatch({
      type: 'CHANGE_TIMEZONE',
      guessedTimezone: tz,
      timezone: timezone
    })
    console.log(`Guessed timezone: ${tz} (${timezone})`);
  }

  _showHomepage() {
    if (this.props.showHomepage && this.props.loaded) {
      return (
        <div style={styles.mainWindow}>
          {/*<Homepage click={this._handleClick} />*/}
          <TestPseudo />
        </div>
      )
    }
  }

  _showHeader() {
    return (
      <div>
        <HeaderApp />
      </div>

    )
  }
  render() {
    return (
      <div>
        {this._showHeader()}
        {this._showHomepage()}    
      </div>

    )
  }
}

const styles = {
  mainWindow: {
    height: '100vh',
    width: '100vw'
  }
}

const mapStateToProps = state => {
  return {
    guessedTimezone: state.guessedTimezone,
    timezone: state.timezone,
  };
};

export default connect(mapStateToProps)(App);

I call that new Component instead of my old Component. The homepage can connect but not the new one so i think it's not a problem of emplacement

Upvotes: 0

Views: 587

Answers (1)

Mart
Mart

Reputation: 311

I think its here

import { TestPseudo } from './Components/TestPseudo';

You are importing the non-connected component. Try this 

import TestPseudo from './Components/TestPseudo';

For your understanding, exporting as default can be imported like so;

export default Component

import WhateverName from ....

Named export like const or in your case class;

export class Component

import { Component } from ...

So use brackets when Named, and skip brackets when default.

Upvotes: 4

Related Questions