如何使用 Redux 在 React Native 中使用线程调用 API？答案

【问题标题】：how to call API using thread in React native using redux?如何使用 Redux 在 React Native 中使用线程调用 API？
【发布时间】：2020-05-07 05:15:48
【问题描述】：

如何在 react native 中调用后台线程。使用后台线程创建应用程序来调用 API。建议我实现这一目标。

  import React, { Component } from 'react'
    import { WebView } from 'react-native'

    export default class BackgroundTaskRunner extends Component {
      render() {
        return (
          <WebView
            ref={el => this.webView = el}
            source={{html: '<html><body></body></html>'}}
            onMessage={this.handleMessage}
          />
        )
      }
      runJSInBackground (code) {
        this.webView.injectJavaScript(code)
      }
      handleMessage = (e) => {
        const message = e.nativeEvent.data
        console.log('message from webview:', message)
      }
    }

这是调用后台线程的方式还是有更好的方式来使用线程执行 API 调用？

【问题讨论】：

请分享您尝试过的代码
react-native 不支持多线程，所以我认为最好的方法是使用 redux 并调度一个动作
好的，我没有尝试过，所以请提供代码片段的想法会有所帮助
你应该先用你自己对这个问题的假设来尝试，先尝试你的假设来测试你的知识，如果你所有的努力都没有采取任何行动，然后发布寻求帮助。只有这样学习才能提高你。
顺便说一句，ReactNative 应用程序使用 JS 实现，因此 ReactNative 中没有多线程。您必须了解 JS 中的异步，利用 redux、redux-saga 来处理您的应用程序状态、调用 API 并存储到状态中。如果您想获得多处理的好处，请尝试使用 Swift (iOS)、Java (Android) 编写本机库，然后将其集成到您的应用程序中

标签： reactjs api react-native react-redux react-router

【解决方案1】：

React-native 不支持多线程。因此，要调用 api，您可以使用 redux 调度一个动作，该动作又通过 axios 调用 Api。因此，要么通过 redux 方法，要么您可以使用简单的 axios 库。

我建议你使用 axios，因为它会很整洁，你可以简单地这样做：

import axios from './axiosWrapper';

export const getItineryRequest = async tripId => {
  const params = {
    packageId: '26169',
    packageId: tripId,
    ip: 'true',
  };
  return await axios.get('app/user-package-details/', {params});
};

axios.get 是一个获取请求。希望能帮助到你。如有疑问，请随意

【讨论】：

谢谢。你能举一个使用redux而不是使用任何第三方库来完成这个任务的例子吗
axios 是最常用的库之一，也是值得信赖的，如果你想使用 redux ，还需要 3rd 方和 .到底axios

【解决方案2】：

react-native-threads 是目前最接近多线程的。见why Javascript doesn't support multithreading。

您要实现的目标实际上很常见，并且由公共库实现，Javascript 并发执行代码而不是并行执行代码，除非您正在执行 CPU 繁重的工作，否则不会有区别。

这是一个可以在 React Native 中开箱即用的 sn-p。注意fetch 这里是一个全局变量。 React Native docs 是一个很好的起点。

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

【讨论】：

这只是 API 调用，并没有在后台使用任何线程。