webentwicklung-frage-antwort-db.com.de

Globaler Zustand in React Native

Ich entwickle eine React Native-Anwendung.

Ich möchte die Benutzer-ID der Person speichern, die angemeldet ist, und dann überprüfen, ob der Benutzer in jeder einzelnen Komponente angemeldet ist.

Was ich also suche, ist so etwas wie Cookies, Sitzungen oder globale Zustände.

Ich habe gelesen, dass ich Redux verwenden sollte, aber dies scheint zu kompliziert zu sein und es ist sehr schwierig, es mit react-navigation zu funktionieren. Es zwingt mich dazu, Aktionen und Reduzierungen für fast alles zu definieren, obwohl ich nur auf einen einzigen globalen Zustand/eine einzige Variable in allen Komponenten zugreifen möchte.

Gibt es Alternativen oder sollte ich meine gesamte App für die Verwendung von Redux wirklich umstrukturieren?

5
Jamgreen

Normalerweise erstelle ich eine global.js, die Folgendes enthält:

module.exports = {
   screen1State: null,
};

Und erhalte den Wert des Staates auf dem Bildschirm

render() {

GLOBAL.screen1State = this;
//enter code here

}

Jetzt können Sie es überall verwenden:

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

Es gibt einige Alternativen zu Redux in Bezug auf die Staatsverwaltung. Ich würde dir empfehlen, Jumpsuit und Mobx anzuschauen. Erwarten Sie jedoch nicht, dass sie einfacher sind als Redux. Staatsmanagement ist meistens eine magische Sache, und das meiste Gizmo geschieht hinter den Kulissen. 

Wenn Sie jedoch das Gefühl haben, dass Sie ein globales Zustandsmanagement benötigen, lohnt es sich, eine der Lösungen zu beherrschen, unabhängig von Redux oder Mobx usw. Ich würde die Verwendung von AsyncStorage oder irgendetwas Hacker nicht empfehlen.

1
milkersarac

Hier ist eine einfache Logik, mit der ich es geschafft habe ...

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

Dann importieren Sie ihn an einem beliebigen Ort, um die Datenzeichenfolge abzurufen und zu speichern. 

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


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

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

pdate seit React 16.8.0 (6. Februar 2019) Introduce Hooks.

es ist nicht zwingend erforderlich, eine externe Bibliothek wie Mobx oder Redux zu verwenden. (Bevor Hook vorgestellt wurde, habe ich beide Zustandsverwaltungslösungen verwendet.)

sie können einen globalen Status nur mit 10 Zeilen erstellen. [Quelle] [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);

erweitern Sie Ihre App um den globalen Status

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
0
Chotala Paresh

Normalerweise mache ich Globals so:

Ich erstelle eine globals.js

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

So etwas zum Speichern des Benutzernamens müssen Sie nur importieren: 

GLOBAL = require('./globals');

Wenn Sie die Daten speichern möchten, können Sie den Benutzernamen speichern, indem Sie Folgendes tun: 

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

Und los geht's, Sie müssen nur GLOBAL auf die gewünschten Seiten importieren und verwenden. Verwenden Sie einfach if (GLOBAL.username == 'teste').

0
Brunaine