Global state in React Native

Question

I am developing a React Native application.

I want to save the user id of the person who is logged in and then check if the user is logged in in every single component.

So what I am looking for is something like cookies, sessions or global states.

I have read that I should use Redux, but this seems to be overly complicated and it is very difficult to make it work with react-navigation. It forces me to define actions and reducers for almost everything although the only thing I want is to be able to access a single global state/variable in all components.

Are there any alternatives or should I really re-structure my entire app to use Redux?

Answer 1

I usually create a global.js containing:

module.exports = {    screen1: null, }; 

And get the value of the state on the screen

import GLOBAL from './global.js'  constructor() {      GLOBAL.screen1 = this;  } 

Now you can use it anywhere like so:

GLOBAL.screen1.setState({     var: value }); 

Answer 2

Update since React 16.8.0 (February 6, 2019) introduce Hooks.

it is not mandatory to use external library like Mobx or Redux. (Before Hook was introduce I used both of this state management solutions)

you can create global state just with 10 line Source

import React, {createContext, useContext, useReducer} from 'react'; export const StateContext = createContext(); export const StateProvider = ({reducer, initialState, children}) =>(   <StateContext.Provider value={useReducer(reducer, initialState)}>     {children}   </StateContext.Provider> ); export const useStateValue = () => useContext(StateContext); 

extend your app with global state:

import { StateProvider } from '../state';  const App = () => {   const initialState = {     theme: { primary: 'green' }   };    const reducer = (state, action) => {     switch (action.type) {       case 'changeTheme':         return {           ...state,           theme: action.newTheme         };        default:         return state;     }   };     return (     <StateProvider initialState={initialState} reducer={reducer}>         // App content ...     </StateProvider>   ); } 

For details explanation I recommend to read this wonderful medium