Question

我正在开发一个React Native应用程序。

我想保存登录用户的用户ID，然后检查用户是否已登录每个组件。

所以我要找的是饼干，会话或全球状态。

我已经读过我应该使用Redux，但这似乎过于复杂，很难让它与react-navigation一起使用。它迫使我为几乎所有东西定义动作和减少器，尽管我唯一想要的就是能够访问所有组件中的单个全局状态/变量。

有没有其他选择，或者我是否应该重新构建整个应用程序以使用Redux？

Answer 1

我通常创建一个包含以下内容的global.js

module.exports = {
   screen1State: null,
};

并在屏幕上获取状态值

render() {

GLOBAL.screen1State = this;
//enter code here

}

现在您可以在任何地方使用它了，

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

Answer 2

在州管理方面有一些alternatives to Redux。我建议你看看Jumpsuit和Mobx。但是不要指望它们比Redux更容易。国家管理大多是一件神奇的事情，大多数小发明都发生在幕后。

但是无论如何，如果你觉得你需要一些全局的状态管理，那么无论Redux还是Mobx等，你都值得花时间去掌握其中一个解决方案。我不建议使用AsyncStorage或任何hacky用于此目的

Answer 3

我通常会做这样的全局变量：

我创建了一个globals.js

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

存储用户名的那些东西，你只需要导入：

GLOBAL = require('./globals');

如果你想存储数据，可以说你想保存用户名：

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

你去了，你只需要在你想要的页面上导入GLOBAL并使用它，只需使用if (GLOBAL.username == 'teste')。

Answer 4

自React 16.8.0（2019年2月6日）引入Hooks以来的更新。

使用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

Answer 5

如果您是新来的人（对我来说）并且对第一个答案感到困惑。首先，使用组件类

export default class App extends React.Component {

constructor(props) {
  super(props);
  this.state = {
    walk: true
  };
  GLOBAL.screen1 = this;
}

render() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
      {this.state.walk ? (
        <>
          <Stack.Screen name="WalkThrough" component={WalkThroughScreen} />
        </>
      ) : (
        <Stack.Screen name="Home" component={HomeScreen} />
      )}
    </Stack.Navigator>
    <StatusBar style="auto" />
  </NavigationContainer>
 )
}

然后您可以在任何其他组件中进行操作（我的组件在/ components上，global在根目录上）：

import GLOBAL from '../global.js'

GLOBAL.screen1.setState({walk:false})

Answer 6

这是我用来完成它的简单逻辑......

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'}))

Answer 7

似乎有一个GLOBAL对象。如果在app.js中将其设置为GLOBAL.user = user，则它似乎可在其他组件中使用，例如抽屉式导航。

React Native中的全局状态

7 个答案: