web-dev-qa-db-fra.com

Etat global dans React Native

Je développe une application React Native.

Je veux enregistrer l'ID utilisateur de la personne qui est connectée, puis vérifier si l'utilisateur est connecté à chaque composant.

Donc, ce que je recherche, c'est quelque chose comme des cookies, des sessions ou des états globaux.

J'ai lu que je devrais utiliser Redux, mais cela semble trop compliqué et il est très difficile de le faire fonctionner avec react-navigation. Cela me force à définir des actions et des réducteurs pour presque tout, même si tout ce que je veux, c'est pouvoir accéder à un seul état global/variable dans tous les composants.

Existe-t-il des alternatives ou dois-je vraiment restructurer toute mon application pour utiliser Redux?

javascriptreactjsreact-nativereduxreact-redux
5
Jamgreen

Je crée généralement un fichier global.js contenant:

module.exports = {
   screen1State: null,
};

Et obtenez la valeur de l'état à l'écran

render() {

GLOBAL.screen1State = this;
//enter code here

}

Maintenant, vous pouvez l'utiliser n'importe où, comme ceci:

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

Il existe quelques alternatives à Redux en termes de gestion d’état. Je vous recommande de regarder Jumpsuit et Mobx. Cependant, ne vous attendez pas à ce qu'ils soient plus faciles que Redux. La gestion de l’État est essentiellement une chose magique et la plupart du gizmo se passe dans les coulisses. 

Quoi qu'il en soit, si vous estimez que vous avez besoin d'une gestion globale de l'état, cela vaut la peine de prendre le temps de maîtriser l'une des solutions, que ce soit Redux, Mobx, etc. Je ne recommanderais pas d'utiliser AsyncStorage ou quoi que ce soit à cette fin.

1
milkersarac

Voici une logique simple, je l'habitude de l'accomplir ...

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 />;
  }
}

Puis importez-le n'importe où pour obtenir et sauvegarder une chaîne de données. 

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


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

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

Je fais habituellement des globals comme ceci:

Je crée un globals.js

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

Quelque chose comme ça pour stocker le nom d'utilisateur alors il vous suffit d'importer: 

GLOBAL = require('./globals');

Et si vous voulez stocker les données, disons que vous voulez enregistrer le nom d'utilisateur, faites simplement: 

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

Et voilà, il vous suffit d'importer GLOBAL sur les pages de votre choix et de l'utiliser, utilisez simplement if (GLOBAL.username == 'teste').

0
Brunaine