Wie man Daten durch api in redux holt?

Question

Ich bin ein Anfänger mit reactjs/redux, konnte kein einfaches Beispiel für die Verwendung eines API-Aufrufs zum Abrufen von Daten in einer Redux-App finden. Ich denke du könntest einen Jquery Ajax Call benutzen aber es gibt wahrscheinlich bessere Möglichkeiten da draußen?

Answer 1

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

Es verwendet Redox, Redux-Thunk und Fetch.

Abrufmethoden;

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

Aktionen verwendet oben:

(Anmerkung:.. Sie viele Aktionen definieren können zB fetchPostRequest verwendet werden kann, eine Ladeanzeige angezeigt werden oder Sie können verschiedene Aktionen bei verschiedenen HTTP-Statuscodes Versand)

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

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

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

Und in Ihrem Reducer können Sie die Posts laden, um Zustand;

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

Sie können auf den Status und die Aktionen innerhalb Ihrer Komponente zugreifen, nachdem Sie sie verbunden haben.

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

Answer 2

Erstellen Sie eine Aktion, bei der Sie die Anforderung an Ihre API senden. Sie können eine Bibliothek wie axios oder fetch verwenden, die ein Versprechen zurückgeben.

Aktionen/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 
    }; 
} 

Dann wird in einem Druckminderer, verbrauchen einmal das Versprechen Ergebnis wie folgt aufgelöst:

Minderer/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 entliehen von Stephen Grider. Dies ist sein Repo: https://github.com/StephenGrider/ReduxCasts/tree/master/weather/src