Redux & React Native component connect: this.props is undefined

Question

I am trying to access the name field as defined in the initial state of my reducer. At the moment, this.props is returning undefined.

My reducer:

import { combineReducers } from 'redux';

const INITIAL_STATE = {
    name: "Test"
}

const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
      default:
        return state
    }
};

export default combineReducers({
  user: userReducer,
});

The component being rendered (this logs "Props: undefined"):

const AddName = ({ navigation }) => {

    ...

    console.log("Props: ", this.props)

    return (
        <>
        ...
        </>
    )
}

mapStateToProps = (state) => {
    return{
      user : state.user
    };
}

export default connect(mapStateToProps, null)(AddName)

Creating the redux store and provider:

...
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './src/reducers/userReducer';

const store = createStore(reducer)

const AppContainer = () => 
    <Provider store={store} >
        <App />
    </Provider>


AppRegistry.registerComponent(appName, () => AppContainer);

It's a functional component, there is no this but you can access props - change const AddName = ({ navigation }) => { to const AddName = (props) => { and then access the props object - otherwise you are destructuring the props in the function definition. — madebydavid
– madebydavid, Commented Dec 20, 2019 at 23:24
@madebydavid Doh, thank you! I ended up using the new React Hooks in react-redux. thoughtbot.com/blog/using-redux-with-react-hooks — Greg M
– Greg M, Commented Dec 21, 2019 at 1:46

Gaurav Roy · Accepted Answer · 2019-12-21 05:19:32Z

1

You are using a functional component and this keyword doesnt apply to functional components, rather it applies it to class Components.

Change your component as below :

class AddName extends React.Component {

    ...

    console.log("Props: ", this.props)

    render(){
    return (
        <>
        ...
        </>
    )

     }

}

mapStateToProps = (state) => {
    return{
      user : state.user
    };
}

export default connect(mapStateToProps, null)(AddName)

hopeit helps. feel free for doubts

answered Dec 21, 2019 at 5:19

Gaurav Roy

12.4k3 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shayan Moghadam · Accepted Answer · 2019-12-21 05:18:53Z

0

You are using a function Component so you should use props in this way :

const AddName = (props) => {

...

console.log("Props: ", props)

return (
    <>
    ...
    </>
 ) 
}

answered Dec 21, 2019 at 5:18

Shayan Moghadam

2,0702 gold badges13 silver badges20 bronze badges

Comments

Shubham Sharma · Accepted Answer · 2019-12-21 06:34:43Z

0

You should use class components instead of the function component. Read more about that.

https://codeburst.io/react-js-understanding-functional-class-components-e65d723e909

answered Dec 21, 2019 at 6:34

Shubham Sharma

4994 silver badges8 bronze badges

Collectives™ on Stack Overflow

Redux & React Native component connect: this.props is undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related