Глобальное государство в действии

Я разрабатываю приложение React Native.

Я хочу сохранить идентификатор пользователя для входа в систему, а затем проверить, зарегистрирован ли пользователь в каждом отдельном компоненте.

Поэтому я ищу что-то вроде файлов cookie, сессий или глобальных состояний.

Я прочитал, что я должен использовать Redux, но это кажется слишком сложным, и очень сложно заставить его работать с react-navigation. Это заставляет меня определять действия и редукторы практически для всего, хотя единственное, что я хочу, это иметь доступ к одному глобальному состоянию/переменной во всех компонентах.

Есть ли какие-либо альтернативы, или я должен перестроить все мое приложение, чтобы использовать Redux?

Ответ 1

Я обычно создаю global.js, содержащий:

module.exports = {
   screen1: null,
};

И получить значение состояния на экране

import GLOBAL from './global.js'

render() {

    GLOBAL.screen1 = this;

}

Теперь вы можете использовать его где угодно, например:

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

Ответ 2

Есть несколько альтернатив Redux с точки зрения управления государством. Я бы рекомендовал вам посмотреть Комбинезон и Mobx. Однако не ожидайте, что они будут проще, чем Redux. Государственное управление в основном волшебное, и большая часть гизмо происходит за кулисами.

Но в любом случае, если вы чувствуете, что вам нужно какое-то глобальное управление государством, стоит потратить ваше время на освоение одного из решений независимо от того, как Redux или Mobx или т.д. Я бы не рекомендовал использовать AsyncStorage или что-нибудь взломанное для этой цели.

Ответ 3

Обычно я делаю глобалы следующим образом:

Я создаю globals.js

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

Что-то вроде этого, чтобы сохранить имя пользователя, вам просто нужно импортировать:

GLOBAL = require('./globals');

И если вы хотите сохранить данные, скажем, вы хотите сохранить имя пользователя, просто выполните:

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

И там вы идете, вам просто нужно импортировать GLOBAL на нужные вам страницы и использовать его, просто используйте if (GLOBAL.username == 'teste').

Ответ 4

Вот простая логика, которую я использовал для ее выполнения...

App.js

const globalState={};
import React from "react";
import Setup from "./src/boot/setup";

export const StoreGlobal = (obj)=> {

  if(obj.type==='set'){
  globalState[obj.key]=obj.value;
  return true;
  }else
    if(obj.type==='get'){
  return globalState[obj.key];
  }else{
  return null;
  }

}

export default class App extends React.Component {
  render() {
    return <Setup />;
  }
}

Затем импортируйте его в любом месте, чтобы получить и сохранить строку данных.

import { StoreGlobal } from '../../../App';


    StoreGlobal({type:'set',key:'ok',value:'cool'})

    alert(StoreGlobal({type:'get',key:'ok'}))

Ответ 5

Чтобы использовать глобальное состояние с реагирующим родным, используйте Redux, вы будете перекрашены с хорошо организованным исходным кодом, соблюдая 3 принципа. Вот ссылка, которая объясняет это очень хорошо, для начала: https://www.valentinog.com/blog/redux/ также есть официальная документация: https://redux.js.org/introduction/getting-started

Ответ 6

Обновление с React 16.8.0 (6 февраля 2019 г.) представляет крючки.

не обязательно использовать внешнюю библиотеку, такую как Mobx или Redux. (До появления Hook я использовал оба решения для управления состоянием)

вы можете создать глобальное состояние всего за 10 строк [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);

расширите свое приложение глобальным состоянием

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