Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am trying to get redux working in my react-native app. Basically, I have a signIn action defined in my authActions.js file:

const signInAction = () => {
    return {
        type: 'signIn',
export { signInAction };
Then I have an authReducer defined as this in authReducer.js:
const initialState = {
    isAuthenticated: false,
const authReducer = (state = initialState, action) => {
    switch(action.type) {
        case "signIn": 
            return Object.assign({}, state, {
                isAuthenticated: true,
        default: return state;
export default authReducer;
I combine that reducer in my rootReducer.js file
import { combineReducers } from 'redux';
import auth from 'app/src/redux/reducers/authReducer.js';
const rootReducer = combineReducers({
    auth,
export default rootReducer;
and then created a store in reduxIndex.js:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from 'app/src/redux/reducers/rootReducer.js';
let store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
export default store;
I wrapped my app in a <Provider> component, and that seems to be working fine (I can read from the state and see the value of isAuthenticated. However, when I try to dispatch an action using mapDispatchToProps in one of my views the function is undefined:
// More imports 
// ... 
import { connect } from 'react-redux';
import { signInAction } from 'app/src/redux/actions/authActions.js';
const mapStateToProps = (state) => {
  return {};
const mapDispatchToProps = (dispatch) => {
  return {
    onSignIn: () => { dispatch(signInAction) },
class SignIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
  onSignInPress() {
    // ******* this is where the error occurrs ****
    this.props.onSignIn();
  render() {
    const {navigation} = this.props;
    return (
            <View style={SignInStyles.container}>
              <ScrollView>
                  <Button 
                    large 
                    title="SIGN IN"
                    backgroundColor={colors.primary}
                    onPress={this.onSignInPress}
                </View>
              </ScrollView>
            </View>
export default connect(mapStateToProps, mapDispatchToProps)(SignIn);
I cant really see where I am going wrong, but im sure its a simple mistake somewhere. The specific error I get is :
"undefined is not an object. Evaluating this.props.onSignIn"
The onSignInPress callback isn't bound to any particular object, so when it gets called this is undefined.
The easy way to fix it is to use arrow syntax to make it always be bound.  In your class definition:
onSignInPress = () => {
  this.props.onSignIn();
Google found me this Medium article from Miron Machnicki which explains the differences and possible alternative syntaxes in pretty good detail.
                Hey! that fixed it! Im very new to JS so i keep getting tripped up by the binding of this every now and then. Can you answer a question for me? My render method isnt defined using the fat arrow syntax, yet it still has this bound correctly. How does that work?
– Stone Preston
                Oct 13, 2018 at 17:11
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.