Question

我目前正在构建一个使用react-redux管理状态的react-native应用程序。我试图通过将一些身份验证相关的逻辑放入一个不是React的Component类的扩展的服务中来重复删除它。当用户登录应用程序时，会返回user_token以验证对服务器的后续API调用。此令牌存储在auth缩减器中，因此可通过mapStateToProps调用state.auth.user_token。我在src/utils/fetch.js中定义了一个为我执行API调用的函数：

export function fetchAPI(endpoint, method = 'GET', data) {
  let url = 'http:localhost:3000/api/' + endpoint;

  let headers = { 'User-Token': 'XXXXXX' };

  if (method === 'POST') {
    headers['content-type'] = 'application/json';
  }

  let options = {
    method: method,
    headers: headers,
    mode: 'cors' // no-cors, cors, *same-origin
  };

  if (data) {
    options.body = JSON.stringify(data);
  }

  return fetch(url, options).then((response) => {
    ...

我想知道是否有一种优雅/正常的方式使这个实用程序服务能够识别state内的值。我不想在每个进行经过身份验证的API调用的组件中显式提取该属性 - 我基本上必须在任何地方都这样做，而且感觉冗余和冗长。更改方法签名以接受此参数会感觉很糟糕：

export function fetchAPI(user_token, endpoint, method = 'GET', data) {
                         ^^^^^^^^^^ doesn't change while someone is logged in

但是这样的事情感觉更好：

import storeProvider from './storeProvider';

export function fetchAPI(user_token, endpoint, method = 'GET', data) {
  const user_token = storeProvider.getUserToken();

  ... (go do great stuff with user_token)

有传统方法吗？有没有人见过这种将state提取到不是容器的东西？

Answer 1

创建store导出后。将store导入fetchAPI。然后使用store.getState()，并从州中提取用户令牌。

示例：

// you'll to export the store after you use create store import store from './store'; // this selector can be used across the app const getUserToken = ({ auth }) => auth.user_token; export function fetchAPI(user_token, endpoint, method = 'GET', data) { const user_token = getUserToken(store.getState()); ... (go do great stuff with user_token)

在React Redux组件

1 个答案: