react-native set global state and call back using redux

Question

I am trying to pass state globally using redux. What I want to do is, in the first screen, I generate a randomNumber and set that to global state .

Then, I navigate to the next screen, and when I toggle a button, I call back the global state randomNumber . Below is my code:

App.js

    import { createStore } from 'redux'
    import { Provider } from 'react-redux'
    import { createDrawerNavigator, createStackNavigator, } from 'react-navigation'

    const initialState = {randomNumber:''}
    const reducer = (state = initialState, action) => {
      switch (action.type) {
        case 'UPDATE':
                return { randomNumber: state.randomNumber}
      }
        return state
    }

    const store = createStore(reducer)

    class App extends Component {
      render(){
        return(
          <Provider store={store}>
            <View style={{flex:1,backgroundColor:'transparent'}}>
              <AppDrawerNavigator/>
            </View>
          </Provider>
        )
      }
    } 

FirstScreen.js

This is where I generate random number and pass the state globally.

import { LoginButton, AccessToken } from 'react-native-fbsdk';
import {connect} from 'react-redux'

class FirstScreen extends Component{

  GenerateRandomNumber = () => {
  var RandomNumber = Math.floor(Math.random() * 100) + 1 ;
  this.setState({ RandomNumber : RandomNumber },
  () => console.log(this.state.RandomNumber))
  }

  render() {
  return(
  <View>
    <Text>{this.state.RandomNumber}</Text>
    <Button title="Generate Random Number" onPress={this.GenerateRandomNumber} />
 </View>

function mapStateToProps(state) {
    return {
        randomNumber: state.randomNumber
    }
}

export default connect(mapStateToProps, null)(FirstScreen)

SecondScreen.js

Here when I try to call back the global state randomNumber I get undefined.

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
import {connect} from 'react-redux'

class SecondScreen extends Component {
    render() {
        return (
        <View>
          <Button
                  title="Get global State"
                  onPress={() => this.props.globalState()}/>
          <Text>{this.props.randomNumber}</Text>
        </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        randomNumber: state.randomNumber
    }
}

function mapDispatchToProps(dispatch) {
    return {
        globalState: () => dispatch({ type: 'UPDATE' }),
    }
}

export default connect(mapStateToProps, null)(SecondScreen)

My question: In the secondScreen I want to call the global state randomNumber however, I am getting undefined.

Any Idea what I am doing wrong? I am very new to redux, so any advise or comments would be really appreciated! Thanks in advance!

Answer 1

I think in your first screen you have

function mapStateToProps(state) {
    return {
        randomNumber: state.randomNumber
    }
}

but while setting state you are using

 this.setState({ RandomNumber : RandomNumber }

i think it should be

this.setState({ randomNumber: RandomNumber }

Also may be you skipped to dispatch action in firstscreen to set the global state. Using just this.setState you are setting the local state of component. To set global state , you have to dispatch the action .