React Native中的全局状态

Question

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

我想保存登录人员的用户ID,然后检查用户是否在每个组件中登录.

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

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

有没有其他选择,还是我应该重新构建我的整个应用程序以使用Redux？

Answer 1

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

module.exports = {
   screen1: null,
};

并在屏幕上获取状态值

import GLOBAL from './global.js'

render() {

    GLOBAL.screen1 = this;

}

现在，您可以在任何地方使用它，如下所示：

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

Answer 2

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

不强制使用外部库，如Mobx或Redux。（在介绍 Hook 之前，我使用了这两种状态管理解决方案）

只需 10 行源码就可以创建全局状态

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

有关详细说明，我建议阅读这个精彩的媒体

Answer 3

我通常这样做全局：

我创建了一个 globals.js

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

类似的东西来存储用户名，然后你只需要导入：

GLOBAL = require('./globals');

如果您想存储数据，假设您想保存用户名，只需执行以下操作：

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

就这样，您只需要在您想要的页面上导入 GLOBAL 并使用它，只需使用if (GLOBAL.username == 'teste').

Answer 4

在状态管理方面，Redux有一些替代方案。我建议你看看 Jumpsuit 和 Mobx。然而，不要指望它们比 Redux 更容易。状态管理基本上是一件神奇的事情，大部分小发明都发生在幕后。

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