如何为每个组件提供价值？

Question

我对 React Native 有点陌生。

我正在尝试为每个组件添加一个值，主要是登录信息。

我正在使用这个库：

https://github.com/mahomahoxd/react-native-login-keycloak

您通过这种方式获取登录信息：

import Login from 'react-native-login-keycloak';


const gatheredTokens = await Login.getTokens();

现在很明显，await 需要在异步函数中，所以我尝试如下：

async componentWillMount() {
    const gatheredTokens = await Login.getTokens();
    this.setState({ gatheredTokens: this.state.gatheredTokens });
}

但是这看起来很混乱 - 首先，componentWillMount 显然已被弃用（我想我可以将其切换为 componentDidMount），而且它还需要我在每个组件中基本上复制此过程。乱码重复！

有什么更纯粹的方法来做到这一点？我猜是高阶组件或其他结构？

谁能给我一个例子，说明我将如何向我的所有组件提供这个（我正在使用 Redux，所以通过 Redux 或其他方法很好） - 我只是不确定如何确保数据是处理并在任何需要的地方可用，我想要最“反应”的方式。

Answer 1

有多种方法可以做到这一点，渲染 Props、高阶组件，甚至是钩子——不确定在我写这个钩子的时候 React Native 是否支持。

既然你建议了一个高阶组件，那么我的解决方案将使用一个

export const withGatheredTokens = Component => {
  class WithGatheredTokens extends React.Component {
    state = { gatheredTokens: null };

    async componentDidMount() {
        const gatheredTokens = await Login.getTokens();
        this.setState({ gatheredTokens });
    }

    render() {
      return (
        <Component gatheredTokens={this.state.gatheredTokens} {...props} />
      );
    }
  }

  return WithGatheredTokens;
};

// And this is how you use with with a Another Component
export AnotherComponent =  withGatheredTokens(AnotherComponentBase)

无论如何，网络请求应始终在 ComponendDidUpdate 中完成，而不是在 componentWillMount 方法中。

Answer 2

使用 Redux

创建您的 actions 和 reducers

//你可以用

将你的动作文件命名为 loginAction.js

export const setLoginData = data => {
  return {
    type: SET_LOGIN_TOKEN,
    payload: data
  }
};

//和你的减速器

export default (state = {}, action = {}) => {
   switch (action.type) {
      case SET_LOGIN_DATA:
         return {...state, loginData: action.payload};

      default:
        return state;
   }
}

//不要忘记将您的商店应用到App.js 包装View 与//

使用 登录时获得令牌

async componentDidMount() {
   const gatheredTokens = await Login.getTokens();
   this.setState({ gatheredTokens: gatheredTokens });
   //this.setLoginData(gatheredTokens); 
   //having imported `setLoginData` from your login action, and also used `mapDispatchToProps`
}

那么你的 loginData 应该在你需要的任何地方都可用

const mapStateToProps = (state) => ({
   loginData: state.loginData,
});

然后你可以在 loginData 中访问令牌

const loginToken = this.props.loginData;