Global state in React Native

问题

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?

回答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'

render() {

    GLOBAL.screen1 = this;

}

Now you can use it anywhere like so:

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

回答2:

There are some alternatives to Redux in terms of state management. I would recommend you to look at Jumpsuit and Mobx. However do not expect them to be easier than Redux. State management is mostly a magical thing and most of the gizmo happens behind the scenes.

But anyways if you feel that you need some global state management, it worths your time to master one of the solutions no matter Redux or Mobx or etc. I would not recommend using AsyncStorage or anything hacky for this purpose.

回答3:

I usually do globals like this:

I creat an globals.js

module.exports = {
  USERNAME: '',
};

Something like that to store the username then you just need to import :

GLOBAL = require('./globals');

And if you wanna store the Data, lets say you want to save the username just do :

var username = 'test';
GLOBAL.USERNAME = username;

And there you go , you just need to import GLOBAL on the pages you want and use it, just use if (GLOBAL.username == 'teste').

回答4:

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][1]

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][1] 


  [1]: https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c

来源：https://stackoverflow.com/questions/44227235/global-state-in-react-native

标签

javascript

reactjs

react-native

redux

react-redux