web-dev-qa-db-fra.com

Récupération des données de l'API dans React Native en utilisant Redux

Je travaille sur un projet natif réactif où j'essaie de récupérer des données à partir d'une API à l'aide de la bibliothèque axios et d'afficher les données.Par conséquent, mon application affiche d'abord un écran de démarrage et doit ensuite naviguer vers une page composée d'onglets. Les onglets contiendront les données de l'API.

Donc, j'essaie d'initialiser ma boutique dans ma page d'accueil qui vient après l'écran de démarrage. J'ai mon réducteur et mon action définis séparément dans 2 fichiers différents.

fichier 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;

Mon composant 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
  }
})

Mon composant 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
  }
})

fichier 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
        })
    })
  }
}

Mon réducteur

import { FETCH_DATA } from './actions';

export default function(state={}, action) {
  switch(action.type) {
    case FETCH_DATA:
      return {
        ...state,
        action.payload
      };

    default:
        return state;
  }
}

Quelqu'un peut-il me dire s'il s'agit de la bonne façon? Sinon, quelle est la bonne façon?

react-nativeredux
9
pranami

Je dirais qu'il n'y a pas de façon correcte ou incorrecte de le faire. Mais je peux partager une sorte de modèle que j'utilise habituellement.

Je créerais d'abord des dossiers séparés pour différents fichiers. Actions dans le dossier actions, réducteurs dans le dossier réducteurs etc ... Je créerais des constants.js fichier et configureStore.js fichier et les placer dans le répertoire racine du projet.

Je laisserais tomber la bibliothèque Axios et utiliserais simplement Fetch API pour l'extraction des données. Compte tenu de votre code, je ferais ce qui suit.

Créer configureStore.js fichier dans le dossier root de votre projet. Je vous recommande d'utiliser Redux-Thunk. Vous pouvez trouver plus d'informations sur ici .

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>
        );
    }
}

Créons constants.js et nous le plaçons dans le répertoire du projet 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';

Passons maintenant et créons notre fichier d'action qui sera placé dans le dossier actions. Appelons-le quelque chose comme fetchToDos.js. Créons une fonction simple en utilisant 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
    }
}

fetchToDos.js avec Axios 

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...

Passons aux réducteurs. Créons deux fichiers - index.js, todos.js et les placer dans le dossier 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

Fondamentalement, "le levage de charges lourdes" est effectué. Je ne créerais qu'un seul écran, car supposons que les utilisateurs tapent sur le bouton de retour (Android) lorsqu'ils sont à l'écran d'accueil, ils se retrouveront sur cet écran de démarrage. Donc, dans cet exemple, je vais utiliser un seul écran.

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)

J'espère vraiment que vous trouverez ce concept utile car je peux dire d'après mon expérience qu'il m'a beaucoup aidé lorsque j'ai commencé et m'a aidé à mieux comprendre le concept de redux.

Désolé s'il y a des fautes de frappe et des erreurs. J'étais sur un flux.

20
Ivalo Pajumets