如何使用 ReactNative 和 Redux 获取 API 数据

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

这是一个未经测试的解决方案，但它应该有效。 要显示活动指示器，您必须在 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);

Answer 2

看起来您的fetchAssistantSuccess函数没有在您的Actions文件中定义，所以我不确定该操作将如何调度。你需要类似的东西

行动.js

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

并在您的减速器中.js

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

此外，您可能希望在诸如邮递员之类的东西中单独测试端点 以确保它传递正确的数据。