While the answer above is valid, it's always good to write modular code and keep your react components stateless (without having state variables). The following code shows a better approach to your problem:

import React from "react";

import listUnitItem from "./listUnitItem.scss";

//Number formatting
const numeral = require('numeral');

export default class ListUnitItem extends React.Component {
    // Save this method in some Utils class where you can access from other components.
    getFormattedNumber(number){
        //format numbers greater than 1000
        if (number > 1000) {
            //only format number
            number = numeral(number).format('0.0a');
        }
        return number
    }

    render() {
        return(
            <li className="list-unit-item col-sm-2">
                <span className="unit-item-number">{this.getFormattedNumber(this.props.number)}</span>
                <span className="unit-item-title">{this.props.title}</span>
            </li>
        )
    }
}

I hope this helps!

I see two options here.

1. Assign the variables to the window object
2. Use environment variables

Using the window object

To use the window object, declare the variable as

myVar = 'someString'

or

window.myVar = 'someString'

In both cases you'll access the variable within React with window.myVar. Here's a quick example:

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React and ES6!</h1>
        <p>Let's play. :)</p>
        <p>{window.myVar}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica Neue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>
<script>
  window.myVar = 'someString2'
</script>

Using environment variables

The Create React App build allows for environment variables to be used within the app. To add an environment variable create a .env file in the root of your project, then add the appropriate variables and prefix the variable name with REACT_APP_. For example:

REACT_APP_MYVAR = "someString"

In the app these variables can be accessed within your components with {process.env.REACT_APP_MYVAR}, or within the HTML with %REACT_APP_MYVAR%.

You can simply define your testing variable outside of your function:

let testing;

function someFunc(someInput) {
    testing = "some data";
}
const global = testing;

Or you can return it inside the function:

function someOtherFunc(input){
    let testing = "some data"
    return testing;
}
const testing = someOtherFunc("some input");

But since your function is a reducer it really should not cause any side-effects which is exactly what you'r trying to do. Updating your question with more explanation might help find other alternative to what you are trying to reach.

If you export a variable you can import it into another file. So if you dont explicitly export it, it's private to the module it's defined in.

export const myVar; is public and can be imported

const myPrivateVar; is private and cannot be imported used directly or referenced in anyway.

You cant access variable outside the block. If you want to access then you need to declare all variable outside the block of useEffect. You can do it in multiple ways like below.

Method 1: Declare variable outside.

import React, { useEffect } from 'react';

const Warning: React.FC = () => {
  let confirm;
  let invalid;
  let confirmed;
  let warningBar;

  useEffect(() => {
    confirm = document.getElementById("confirm");
    invalid = document.getElementById("invalid");
    confirmed = document.getElementById("confirmed");
    warningBar = document.getElementById("warning-bar");
    printAll();
  }, []);

  function printAll () {
    console.log(confirm);
    console.log(invalid);
    console.log(confirmed);
    console.log(warningBar);
  }

  return (
    <div>
      <section className='warning-bar' id='warning-bar'>
        <div className='confirm' id='confirm'>Confirm</div>
        <div className='invalid' id='invalid'>Invalid</div>
        <div className='confirmed' id='confirmed'>Confirmed</div>
      </section>
    </div>
  );
};

Method 2: Using useRef

import React, { useEffect, useRef } from 'react';

const Warning: React.FC = () => {
  let confirm = useRef({});
  let invalid = useRef({});
  let confirmed = useRef({});
  let warningBar = useRef({});

  useEffect(() => {
    printAll()
  }, []);

  function printAll () {
    console.log(confirm.current);
    console.log(invalid.current);
    console.log(confirmed.current);
    console.log(warningBar.current);
  }

  return (
    <div>
      <section className='warning-bar' ref={warningBar} id='warning-bar'>
        <div className='confirm' ref={confirm} id='confirm'>Confirm</div>
        <div className='invalid' ref={invalid} id='invalid'>Invalid</div>
        <div className='confirmed' ref={confirmed} id='confirmed'>Confirmed</div>
      </section>
    </div>
  );
};

Demo Link

You're using class programming on your react aplication, so you must do somenthing like this

import axios from 'axios'

class App extends Component {
 constructor(props){
        super(props);
        this.state = {data: []}

    }

    componentDidMount(){
        axios.get("https://ghibliapi.herokuapp.com/films")
            .then(response =>{
                this.setState({data: response.data});
            })
            .catch(function(error){
                console.log(error)
            })
    }

    componentDidUpdate(){
        axios.get("https://ghibliapi.herokuapp.com/films")
            .then(response =>{
                this.setState({data: response.data});
            })
            .catch(function(error){
                console.log(error)
            })
    }

    
    render() {

       
        
        return (
            <div>
                {data.map(data=> (

                //logic to render the api's data
                
                ))}
                

                    
                
            </div>

            
        )
    }
}

I think i can describe your purpose at:

• Login user
• If ingame -> naviage to game
• Else -> navigate to Auth.

There are many way to do this but as "simple" in your question, i think React Native Async Storage is a good solution.

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

See React Native document about Async Storage here.

There is some demo codes:

Get data from storage:

var gameOfTheUser = AsyncStorage.getItem('gameOfTheUser');

Save data to Async Storage:

await AsyncStorage.setItem('gameOfTheUser', 'the_witcher_3');

Note: Async storage can only save data with type of String. So with complex data like array or Object you must JSON.stringify it first

You can do like this:

class Countdown extends React.Component{
    constructor() {
        super();
        //set the initial state
        this.state = { count: 10 };
    }
    //function to change the state
    changeCount(num){
      this.setState({count:num});
    }
    render(){
        return(
            <div>
                <button onClick={()=>begin(this.changeCount.bind(this), this.state.count)}>start</button>
                <button>pause</button>
                <button>continue</button>
                <p>{this.state.count}</p>
            </div>
        );
    }
};
//callback function to change the state in component
//c is the initial count in state
const begin=(fun, c)=>{
    let count = c;
    const timer = setInterval(countdown,1000);
    function countdown(){
        count=count-1
        if (count<0){
            clearInterval(timer);
            return; 
        }
        fun(count)
        console.log(count)
    }
}

ReactDOM.render(<Countdown/>, document.getElementById('example'));

working code here

Try using the useState() to store res and the useEffect() to update res when this changes;

const firebaseApp = initializeApp(firebaseconfig)
const storage = getStorage(firebaseApp)
const [res, setRes] = useState();

const downloadurl = () => { getDownloadURL(ref(storage, 'files/linpeas.txt'))
    .then((url) => {
       setRes(url);
       console.log(res)
    })
    .catch((error) => console.log(error));
};
      
useEffect(() => {
    console.log(res);
  }, [res]);

TodoComponent

import React from 'react';
import ReactDom from 'react-dom';
import TodoItem from './todoItem'; 

class TodoComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        todos: ["clean up", "walk doggo", "take nap"]
      };
    }
    handleDelete(item){
        let todos = this.state.todos;
        todos= todos.filter((todo) => todo !== item);
        this.setState((prevState) => ({
            todos: todos
        }));
    };
    render() {

      return (<div>

        <h1>The todo list:</h1>
        <ul>
          <TodoItem todos={this.state.todos} handleDelete={this.handleDelete}/>
        </ul>
      </div>);
    }

  }

  ReactDom.render(<TodoComponent/>, document.querySelector(".todo-wrapper"));

Todo Item

import React from 'react';
import ReactDom from 'react-dom';

export default class TodoItem extends React.Component {
    render() {
        return ( 
            this.props.todos.map((item) => {
            return (
                <li>
                    <div className="todo-item">
                    <span className="item-name">{item}</span>
                    <span className="item-remove" onClick={() => this.props.handleDelete(item)}> x </span>
                    </div>
                </li>
            )
        }))
    }
}

Your code is having the problem in TodoItem that you are trying to delete items in TodoItem where you do not have access to state. And moreover If you do some actions in component and you want to get the change reflected the your components must re render. And this is possible when your state is changed. And component related to corresponding changes will re render itself