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





Что ж, сразу же похоже, что ваша функция 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);