it-roy-ru.com

Глобальное состояние в React Native

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

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

Так что я ищу что-то вроде куки, сессий или глобальных состояний.

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

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

5
Jamgreen

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

module.exports = {
   screen1State: null,
};

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

render() {

GLOBAL.screen1State = this;
//enter code here

}

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

GLOBAL.screen1State.setState({
    var: value
});
1
Raphael Estrada

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

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

1
milkersarac

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

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'}))
0
General Omosco

Я обычно делаю глобалы вот так:

Я создал globals.js

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

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

GLOBAL = require('./globals');

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

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

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

0
Brunaine