如何使用 React Native 和 Redux 获取 API 数据

Question

我正在创建此组件以从“https://facebook.github.io/react-native/movies.json”文件中获取数据。我正在尝试将其作为测试应用程序，稍后计划使用我的实际 API 端点。但是，我很难在屏幕上显示数据。它没有给出任何错误或显示 errors.How 我可以添加 activity 指示器来检查数据是否正在获取并显示数据吗？

动作

import {
  FETCHING_ASSISTANT_REQUEST,
  FETCHING_ASSISTANT_SUCCESS,
  FETCHING_ASSISTANT_FAILURE
} from "./types";

export function fetchAssistantRequest() {
  return {
    type: FETCHING_ASSISTANT_REQUEST
  };
}

export function fetchAssistantFailure(errorMessage) {
  return {
    type: FETCHING_ASSISTANT_FAILURE,
    errorMessage
  };
}

export const fetchAssistant = () => {
  return async dispatch => {
    dispatch(fetchAssistantRequest());
    try {
      let response = await fetch(
        "https://facebook.github.io/react-native/movies.json"
      );
      let json = await response.json();
      dispatch(fetchAssistantSuccess(json.results));
    } catch (error) {
      dispatch(fetchAssistantFailure(error));
    }
  };
};

减速器

import {
  FETCHING_ASSISTANT_REQUEST,
  FETCHING_ASSISTANT_SUCCESS,
  FETCHING_ASSISTANT_FAILURE
} from "../actions/types";

//initial states
const initialState = {
  isFetching: false,
  errorMessage: null,
  assistant: []
};

export default function assistantReducer(state = initialState, action) {
  switch (action.type) {
    //fetching state
    case FETCHING_ASSISTANT_REQUEST:
      return { ...state, isFetching: true };
    //success state
    case FETCHING_ASSISTANT_SUCCESS:
      return { ...state, isFetching: false, assistant: action.data };
    //faliuer state
    case FETCHING_ASSISTANT_FAILURE:
      return { ...state, isFetching: false, errorMessage: action.errorMessage };

    default:
      return state;
  }
}

应用减速器

import .. from ".."
const AppReducer = combineReducers({
  auth: AuthReducer,
  // assis: AssistanceReduer,
  // assistant: DumyReducer,
  assis: AssisReducer
});

export default AppReducer;

应用程序

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { connect } from "react-redux";

import { fetchAssistant } from "../actions/AssistantAction";

class Assistant extends React.Component {
  componentDidMount() {
    this.props.getAssistance;
  }
  render() {
    return (
      <View>
        <Text> {this.props.assistant.assistant.title}</Text>
        <Text>{JSON.stringify(this.props.assistant.assistant.title)}</Text>
      </View>
    );
  }
}
function mapStateToProps(state) {
  return {
    assistant: state.assis
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getAssistance: () => dispatch(fetchAssistant())
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Assistant);

商店

import { createStore, applyMiddleware, compose } from "redux";
import { composeWithDevTools } from "remote-redux-devtools";
import thunk from "redux-thunk";
import AppReducer from "../reducers/AppReducer";

const store = createStore(
  AppReducer,
  {}, // initial state
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

Answer 1

好吧，您的 fetchAssistantSuccess 函数似乎没有在您的 Actions 文件中定义，所以我不确定 action 将如何调度。你需要像

这样的东西

Action.js

export function fetchAssistantSuccess(payload) {
  return {
    type: FETCHING_ASSISTANT_SUCCESS,
    payload
  };
}

在你的Reducer.js

case FETCHING_ASSISTANT_SUCCESS:
      return { ...state, isFetching: false, assistant: action.payload};

此外，您可能希望通过类似 postman 的方式单独测试端点以确保它传递正确的数据。

Answer 2

这是一个未经测试的解决方案，但它应该有效。要显示 activity 指示器，您必须在 redux 存储中使用 isFetching 变量。由于 "assistant" 是一个数组，您必须使用 map() 它来显示每个项目。当然，更好的解决方案是 FlatList。

import React, { Component } from "react";
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
import { connect } from "react-redux";

import { fetchAssistant } from "../actions/AssistantAction";

class Assistant extends React.Component {
  componentDidMount() {
    this.props.getAssistance();
  }

  render() {
    if(this.props.isFetching) return (<ActivityIndicator size="small" color="#00ff00" />);

    return (
      <View>
        {this.props.assistant.assistant.map(item => <Text key={item.id}>{item.title}</Text>)}
      </View>
    );
  }
}
function mapStateToProps(state) {
  return {
    isFetching: state.isFetching,
    assistant: state.assis
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getAssistance: () => dispatch(fetchAssistant())
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Assistant);

如何使用 React Native 和 Redux 获取 API 数据

How to fetch API data with ReactNative and Redux

react-native

redux

react-native-ios