我正在为“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;
}
}
App Reducer
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;
这是一个未经测试的解决方案,但应该可行。要显示活动指示器,您必须在redux存储中使用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);
好吧,看起来你的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};
此外,您可能希望单独测试端点,例如postman,以确保它传递正确的数据。