web-dev-qa-db-fra.com

Comment récupérer des données via api dans Redux?

Je suis un débutant avec reactjs/redux, je ne trouvais pas un exemple simple à utiliser sur la façon d'utiliser un appel api pour récupérer des données dans une application redux. Je suppose que vous pourriez utiliser un appel ajax jQuery, mais il existe probablement de meilleures options?

reactjsreact-redux
25
bier hier

JSfiddle; http://jsfiddle.net/cdagli/b2uq8704/6/

Il utilise redux, redux-thunk et fetch.

Chercher des méthodes;

function fetchPostsWithRedux() {
    return (dispatch) => {
    dispatch(fetchPostsRequest());
    return fetchPosts().then(([response, json]) =>{
        if(response.status === 200){
        dispatch(fetchPostsSuccess(json))
      }
      else{
        dispatch(fetchPostsError())
      }
    })
  }
}

function fetchPosts() {
  const URL = "https://jsonplaceholder.typicode.com/posts";
  return fetch(URL, { method: 'GET'})
     .then( response => Promise.all([response, response.json()]));
}

Actions utilisées ci-dessus:

(Remarque: vous pouvez définir plusieurs actions, par exemple fetchPostRequest peut être utilisé pour afficher un indicateur de chargement. Vous pouvez également envoyer différentes actions en cas de codes de statut HTTP différents.)

function fetchPostsRequest(){
  return {
    type: "FETCH_REQUEST"
  }
}

function fetchPostsSuccess(payload) {
  return {
    type: "FETCH_SUCCESS",
    payload
  }
}

function fetchPostsError() {
  return {
    type: "FETCH_ERROR"
  }
}

Et dans votre réducteur, vous pouvez charger les messages à indiquer;

const reducer = (state = {}, action) => {
  switch (action.type) {
    case "FETCH_REQUEST":
      return state;
    case "FETCH_SUCCESS": 
      return {...state, posts: action.payload};
    default:
      return state;
  }
}

Vous pouvez accéder à l'état et aux actions de votre composant après les avoir connectés avec;

connect(mapStateToProps, {fetchPostsWithRedux})(App);
49
cdagli

Créez une action dans laquelle vous effectuez la demande auprès de votre API. Vous pouvez utiliser une bibliothèque comme axios ou fetch, qui renvoient une promesse.

actions/index.js:

import axios from 'axios';

export const FETCH_SOMETHING= 'FETCH_SOMETHING;
const ROOT_URL = 'http://api.youapi.com';

export function fetchWeather(city) {

    const url = `${ROOT_URL}&q=${aParamYouMayNeed}`;
    const request = axios.get(url);

    return {
        type: FETCH_SOMETHING,
        payload: request
    };
}

Puis, dans un réducteur, consommez le résultat de la promesse une fois résolu comme suit:

réducteurs/reducer_something.js:

import { FETCH_SOMETHING} from '../actions/index';

export default function(state = [], action) {
    switch (action.type) {
        case FETCH_SOMETHING:
        return [ action.payload.data, ...state ];
    }

    return state;
}

Code emprunté à Stephen Grider. Voici son référentiel: https://github.com/StephenGrider/ReduxCasts/tree/master/weather/src

9
Franco