Как получить данные API с помощью ReactNative и Redux

Я создаю этот компонент для извлечения данных из файла "https://facebook.github.io/react-native/movies.json". Я пробую это как приложение для тестирования и позже планирую использовать свою фактическую конечную точку API. Однако мне трудно отображать данные на экране. Он не выдает никаких ошибок и не показывает ошибок. Как я могу добавить индикатор активности, чтобы проверить, происходит ли выборка данных, и отображать ли данные?

Действие

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;
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
6
0
1 693
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Что ж, сразу же похоже, что ваша функция fetchAssistantSuccess не определена в вашем файле Actions, поэтому я не уверен, как будет отправлен этот действие. Вам понадобится что-то вроде

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};

Кроме того, вы можете протестировать конечную точку отдельно в чем-то вроде почтальон чтобы убедиться, что он передает правильные данные.

Ответ принят как подходящий

Это непроверенное решение, но оно должно работать. Чтобы показать индикатор активности, вы должны использовать переменную isFetching в вашем магазине redux. Поскольку «помощник» - это массив, вы должны использовать 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);

Другие вопросы по теме