javascript - 在 React Native/Redux 应用程序上重复发送 API 调用

Question

我正在开发一个反应本机应用程序，我的堆栈由以下包组成：

1. 反应原生
2. 样式化的组件
3. Redux 和 React-Redux 和 Thunk
4. Axios（用于进行 API 调用）

我正在尝试对无头 cms 进行 API 调用并使用检索到的数据。在初始加载 API 调用将进行从 API 加载数据。

问题：

过去 3 天我一直在处理它，但无法解决问题，当我尝试使用 useEffect Hook 从组件进行 API 调用时，API 调用被发送多次，或者看起来就是这样但我认为 API 调用会重复进行，直到其中一个被拒绝，或者发生一些错误。我已经看到重复进行了多达 10 个 API 调用。

我尝试了一些东西，例如使用类组件并将API调用放在componentDidMount生命周期方法中，但结果是一样的。我曾尝试使用本地状态并从组件中删除 redux，这似乎可行，但随后使用 redux 就达不到目的了。

我的代码：

减速器：

以下 reducer 负责处理提到的子状态，

import {FETCH_MEDITATION, FETCHING} from '../types';

const initialState = {
  isFetching: false,
  data: [],
};

export default function (state = initialState, {type, payload}) {
  switch (type) {
    case FETCHING: 
    return {
      isFetching: true,
      ...state,
    }
    case FETCH_MEDITATION:
      return {
        ...state,
        data: payload
      };
      break;
    default:
      return state;
  }
}

动作创建者：

import axios from 'axios';
import {FETCH_MEDITATION} from '../types';
import getDeepProp from '../../utilities/getDeepProp';

export function fetchMeditation() {
  return async (dispatch) => {
    console.log('fetching meditations');
    try {
      const fetch = await axios('http://xx8.1x9.xx.cv/meditations');
      const res = await fetch.data;

      const data = await res.map((item) => {
        return {
          id: getDeepProp(['id'], item),
          title: getDeepProp(['title'], item),
          tagline: getDeepProp(['tagline'], item),
          image: getDeepProp(
            ['featured_image', 'formats', 'thumbnail', 'url'],
            item,
          ),
          audio: getDeepProp(['audio', 'url'], item),
          total_time: getDeepProp(['total_time'], item),
          time_seconds: getDeepProp(['time_second'], item),
        };
      });

      console.log(data);

      dispatch({
        type: FETCH_MEDITATION,
        payload: data,
      });
    } catch (error) {
      console.log(error);
    }
  };
}

连接组件进行 API 调用

import React, {useEffect, useState} from 'react';
import {TouchableHighlight} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Card from './Card';
import HorizontalGrid from './HorizontalGrid';
import {fetchMeditation} from '../../store/actions/meditation-actions';
import {connect} from 'react-redux';

const Meditation = (props) => {
  const handlePress = (soundData) => {
    Actions.player(soundData);
  };

  useEffect(() => {
    props.fetchMeditation();
  }, []);

  return (
    <HorizontalGrid heading="Meditation">
      {props.meditation.map((item) => {
        const {id, title, image} = item;
        return (
          <TouchableHighlight
            onPress={() => {
              handlePress(item);
            }}
            key={id}>
            <Card
              imageUri={{uri: 'http://xxxx8xxx' + image}}
              title={title}
            />
          </TouchableHighlight>
        );
      })}
    </HorizontalGrid>
  );
};

const mapStateToProps = (state) => {
  return {meditation: state.meditation.data};
};

const mapDIspatchToProps = {
  fetchMeditation,
};

export default connect(mapStateToProps, mapDIspatchToProps)(Meditation);

日志截图：

编辑：

我使用react native router flux的似乎不适用于 redux。它似乎在 ajax 请求上卸载了整个屏幕，最终导致重复的 API 调用。

标签： javascriptreactjsreact-nativeredux