我正在开发一个本机反应项目,我正在尝试使用axios库从api中获取数据并显示数据。所以,我的应用程序首先显示一个启动画面,然后它需要导航到一个页面tab.The选项卡将包含来自api的数据。
所以,我试图在我的主页中初始化我的商店,这是在启动画面之后。我将减速器和动作分别定义在2个不同的文件中。
App.js文件
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import SplashScreen from './src/components/SplashScreen';
import HomeScreen from './src/components/HomeScreen';
const Navigation = StackNavigator({
Splash: {
screen: SplashScreen
},
Home: {
screen: HomeScreen
}
})
export default Navigation;
我的SplashScreen组件:
import React from 'react';
import { StyleSheet,
Text,
View,
} from 'react-native';
export default class SplashScreen extends React.Component {
static navigationOptions = {
header: null
}
componentWillMount() {
setTimeout(() => {
this.props.navigation.navigate('Home')
},2000)
}
render() {
return(
<View style={styles.container}>
<Text style={styles.welcome}>Splash Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'skyblue'
},
welcome: {
color: '#FFF',
fontSize: 30
}
})
我的HomeScreen组件:
import React from 'react';
import { StyleSheet,
Text,
View,
} from 'react-native';
export default class SplashScreen extends React.Component {
static navigationOptions = {
header: null
}
componentWillMount() {
setTimeout(() => {
this.props.navigation.navigate('Home')
},2000)
}
render() {
return(
<View style={styles.container}>
<Text style={styles.welcome}>Splash Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'skyblue'
},
welcome: {
color: '#FFF',
fontSize: 30
}
})
import React from 'react';
import { StyleSheet,
Text,
View,
} from 'react-native';
export default class SplashScreen extends React.Component {
static navigationOptions = {
header: null
}
componentWillMount() {
setTimeout(() => {
this.props.navigation.navigate('Home')
},2000)
}
render() {
return(
<View style={styles.container}>
<Text style={styles.welcome}>Splash Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'skyblue'
},
welcome: {
color: '#FFF',
fontSize: 30
}
})
Action.js文件
import axios from 'axios';
export const FETCH_DATA = 'fetch_data';
const API = 'https://api.myjson.com/bins/fz62x';
export function fetchData() {
const request = axios.get(API);
return dispatch => {
return request.then((data) => {
dispatch({
type: FETCH_DATA,
payload: data
})
})
}
}
我的减速机
import { FETCH_DATA } from './actions';
export default function(state={}, action) {
switch(action.type) {
case FETCH_DATA:
return {
...state,
action.payload
};
default:
return state;
}
}
任何人都可以告诉我这是否正确?如果没有,那么正确的方法是什么?
答案 0 :(得分:12)
我想说没有正确或错误的方法来做到这一点。但我可以分享一种我经常使用的模式。
首先,我会为不同的文件创建单独的文件夹。 actions文件夹中的操作,reducers文件夹中的reducers等...我会创建单独的constants.js
文件和configureStore.js
文件,并将它们放在项目根目录中。
我会放弃Axios库,只使用Fetch API
进行数据提取。考虑到你的代码,我会做以下事情。
在项目configureStore.js
目录中创建root
文件。我建议你使用Redux-Thunk
。您可以从here找到更多信息。
<强> configureStore.js 强>
import { createStore, applyMiddleware } from 'redux';
import app from './reducers';
import thunk from 'redux-thunk';
export default function configureStore() {
let store = createStore(app, applyMiddleware(thunk))
return store
}
<强> App.js 强>
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import configureStore from './configureStore';
import HomeScreen from './screens/HomeScreen';
const NavigationApp = StackNavigator({
HomeScreen: { screen: HomeScreen }
})
const store = configureStore()
export default class App extends Component {
render() {
return (
<Provider store={store}>
<NavigationApp />
</Provider>
);
}
}
让我们创建constants.js
,然后将其放在项目root
目录中。
<强> constants.js 强>
export const FETCHING_TODOS = 'FETCHING_TODOS';
export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';
现在让我们继续创建我们的操作文件,该文件将放在actions
文件夹中。我们将其命名为fetchToDos.js
。让我们使用Fetch API
创建一个简单的函数。
<强> fetchToDos.js 强>
import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';
export function fetchToDos() {
return (dispatch) => {
dispatch(getTodos())
return(fetch('https://api.myjson.com/bins/fz62x'))
.then(res => res.json())
.then(json => {
return(dispatch(getToDosSuccess(json)))
})
.catch(err => dispatch(getToDosFailure(err)))
}
}
function getToDos() {
return {
type: FETCHING_TODOS
}
}
function getToDosSuccess(data) {
return {
type: FETCH_TODOS_SUCCESS,
data
}
}
function getToDosFailure() {
return {
type: FETCH_TODOS_FAILURE
}
}
带Axios的fetchToDos.js
import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';
import axios from 'axios';
export function fetchToDos() {
return (dispatch) => {
dispatch(getUser())
axios.get('https://api.myjson.com/bins/fz62x')
.then(function (response) {
// handle your response here, create an object/array/array of objects etc...
// and return it in dispatch(getToDosSuccess(data over here))
return(dispatch(getToDosSuccess(response.data)))
})
.catch(err => dispatch(getToDosFailure(err)))
}
}
// rest is the same...
继续减速机。让我们创建两个文件 - index.js
,todos.js
并将它们放在reducers
文件夹中。
<强> todos.js 强>
import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';
const initialState = {
todos: [],
isFetching: false,
error: false
}
export default function todosReducer(state = initialState, action) {
switch(action.type) {
case FETCHING_TODOS:
return {
...state,
isFetching: true
}
case FETCH_TODOS_SUCCESS:
return {
...state,
isFetching: false,
todos: action.data
}
case FETCH_TODOS_FAILURE:
return {
...state,
isFetching: false,
error: true
}
default:
return state
}
}
<强> index.js 强>
import { combineReducers } from 'redux';
import todos from './todos';
const rootReducer = combineReducers({
todos
})
export default rootReducer
基本上&#34;举重&#34;已经完成了。我只会创建一个屏幕,因为我们假设用户在主屏幕上点按回按钮(Android),他们最终会在启动画面上显示。所以在这个例子中,我将仅使用一个屏幕。
<强> HomeScreen.js 强>
import React, { Component } from 'react';
import {
View,
Text,
ActivityIndicator
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTodos } from '../actions/fetchTodos';
class HomeScreen extends Component {
componentDidMount() {
this.props.fetchTodos()
}
render() {
const { todos, isFetching } = this.props.todos
if (isFetching) {
return(
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<ActivityIndicator size={'large'} />
</View>
)
} else {
return(
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<Text>todos.length</Text>
</View>
)
}
}
}
function mapStateToProps(state) {
return {
todos: state.todos
}
}
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators({ fetchTodos }, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
我真的希望你发现这个概念很有用,因为我可以从我的经验中说,当我第一次开始时它对我帮助很大,它帮助我更好地理解了redux的整个概念。
很抱歉,如果有任何拼写错误和错误。我正在流动。