Accepted answer

In your verify screen, you try to console log this.state.facebookToken which definitely undefined. Instead try to update the code to this.props.facebookToken


this.state is meant to hold component level state, when you talk about global state, redux state are sitting in depending on the mapStateToProps method you defined


The problems that you're violating is,

You're not passing payload to reducer when you dispatch action

increaseCounter: ()=>dispatch({ type: 'UPDATE', payload: state.facebookToken })

Then in your App.js, you have the following code

switch (action.type) {
  case 'UPDATE':
    return { facebookToken: state.facebookToken}

If you look at the code above, u can notice that Redux's flow work like this, we try to dispatch an action, which is an action object with two property, type and payload (payload is optional, or u can name it whatever you like), then in your reducer, you can access the payload as below

switch (action.type) {
  case 'UPDATE':
    return { facebookToken: action.payload };

you might be wondering what is action.payload, which we provide the value when we dispatch earlier dispatch({ type: 'UPDATE', payload: state.facebookToken }), so action.payload simply is state.facebookToken


Depending on your use case of course, but typically when we return a state in reducer, we would want to return all the other states, and only update the particular states that is changed, for example as below:

switch (action.type) {
  case 'UPDATE':
    return { ...state, facebookToken: state.facebookToken };

Often when I'm trying to debug the problem with Redux, I will do a console.log before the switch statement to find out what are the type i'm dispatching, and the payload I'm passing, and hence console.log(action) which you will be able to see the type property, and the value of payload property

Related Query

More Query from same tag