javascript - React Native 如何通过组件共享登录状态？

Question

在 vue.js 中，我使用 $vm.$root.user 来存储用户数据和共享用户登录状态。在 React.js 中有上下文可以方便地共享数据。

但我没有在 React Native 中找到任何关于它的文档，在 React Native 中执行此操作的正确方法是什么？

Answer 1

我在 React 和 React Native 中都为此目的使用 Reflux (https://github.com/reflux/refluxjs)。

它的工作方式是您设置一个商店，其中包含您的登录状态、用户数据等。每当这些值发生变化时(通过 ajax 调用、用户操作等)，您可以从以对象作为参数存储。 (方法名称是'trigger')。

import Reflux from 'reflux'
import LoginActions from '../actions/LoginActions'

var LoginStore = Reflux.createStore({

isLoggedIn: false,
profile: {},

init: function() {
  // Do some initialization, e.g. checking if you've set some login information or tokens in local storage
},

listenables: [LoginActions],

loginUser: function(e) {
    // Do some call to a server to try and authenticate
    // fetch(...)
    if (fetch_result = true) {
        this.isLoggedIn = true;
        this.trigger({type: "LOGIN_STATUS", loggedIn: true});
    }
},

logoutUser: function(e) {
 // ...
}

上面引用的LoginActions是一个非常简单的模块，例如:

import Reflux from 'reflux'
export default LoginActions = Reflux.createActions([
  'loginUser',
  'logoutUser',
 ]);

你的主应用程序应该监听商店事件，通过添加一个监听器，并且基于对象(你自己定义)你可以更新状态或执行一些逻辑；例如

componentDidMount() {
    this.login = LoginStore.listen(this.loginStoreListener.bind(this));
 }

componenWillUnmount() {
    // Remove the listener on unmounting
    this.login();
}

loginStoreListener(obj) {
    switch (obj.type) {
      case "LOGIN_STATUS":
        this.setState({loggedIn: obj.loggedIn})
        break;
      case "PROFILE":
        this.setState({profile: obj.profile})
        break;
    }
}

在您的主应用程序中，您可以根据登录状态决定显示哪些 View ，例如与 Navigator 结合使用。