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

Question

Я создаю этот компонент для извлечения данных из файла "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;

Answer 1

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

Answer 2

Что ж, сразу кажется, что ваша 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};

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