React Native Redux dispatch not working but with no error

Question

I can't seem to figure out why I can't update the counter even tho I'm dispatching the correct action type and they fall within the INCREMENT and DECREMENT states. I tried passing a mapDispatchToProps and putting functions within that function and I still get the same problem, nothing updates the state for some reason.

Index:

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

const store = createStore(reducer);

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

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

App

import {connect} from 'react-redux';

// create a component
class App extends Component {
  increment = () => {
    this.props.dispatch({type: 'INCREMENT'});
  };

  decrement = () => {
    this.props.dispatch({type: 'DECREMENT'});
  };

  render() {
    return (
      <View style={styles.container}>
        <Button onClick={this.increment} title={'Add 1'} />
        <Text>Counter {this.props.count} </Text>
        <Button onClick={this.decrement} title={'Subtract 1'} />
      </View>
    );
  }
}

Counter

const initState = {
  count: 1,
};

export const reducer = (state = initState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
};

Linda Paiste · Accepted Answer · 2020-10-26 03:36:41Z

2

This is React Native app, right? Your error is that you used onClick for the Button instead of onPress. It works fine now after switching that prop name.

answered Oct 26, 2020 at 3:36

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

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

Comments

Rajesh Verma · Accepted Answer · 2020-10-26 06:05:09Z

0

These point need to be taken care of in order for this to work:

Change the prop onClick to onPress
Create a constructor in the App Component, to bind "this" to the increment, decrement action creator functions. Like this:

constructor() {
    super(props)
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
}

Lastly, connect to Redux store, and dispatch the actions like ,in AlphaDevs's Answer

answered Oct 26, 2020 at 6:05

Rajesh Verma

162 bronze badges

Comments

awmidas · Accepted Answer · 2020-10-27 03:11:51Z

0

You have to connect the App component into the redux store with connect function.

import { connect } from 'react-redux';

// create a component
class App extends Component {
  increment = () => {
    this.props.increment();
  };

  decrement = () => {
    this.props.decrement();
  };

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={this.increment} title={'Add 1'} />
        <Text>Counter {this.props.count} </Text>
        <Button onPress={this.decrement} title={'Subtract 1'} />
      </View>
    );
  }
}
const mapStateToProps = state => ({ count: state.count })
const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

edited Oct 27, 2020 at 3:11

answered Oct 26, 2020 at 0:42

awmidas

6835 silver badges13 bronze badges

6 Comments

azimov308 Over a year ago

I had connected both but I wrote it under my styles so I didn't copy/paste it over. Still doesn't do anything to count, unfortunately.

awmidas Over a year ago

@azimov308 Did you check if the button click event called correctly?

azimov308 Over a year ago

in the increment function I changed this.props.increment() to this.props.dispatch({type: 'INCREMENT'}); and it still doesn't work. Dispatch receives the correct action but doesn't handle it correctly.

awmidas Over a year ago

@azimov308 I think the button click action is not working on your code, as I mentioned before.

azimov308 Over a year ago

The problem was I used onClick instead of onPress, thanks!

|

Collectives™ on Stack Overflow

React Native Redux dispatch not working but with no error

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related