Jak pobrać dane przez api w redux?

Question

Jestem początkujący z reactjs/redux, nie mogłem znaleźć prostego w użyciu przykładu użycia wywołania api do pobierania danych w aplikacji redux. Sądzę, że można użyć wywołania ajax jquery, ale są tam prawdopodobnie lepsze opcje?

Answer 1

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

Używa redux, redux-thunk i Fetch.

Metody pobierania;

(Uwaga::.. Można zdefiniować wiele akcji np fetchPostRequest mogą być używane do wyświetlania wskaźnik załadunku lub można wysyłają różne działania w przypadku różnych kodów stanu HTTP)

użyte powyżej

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

Akcje

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

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

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

W swoim reduktorze można załadować posty do stanu;

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

Możesz uzyskać dostęp do stanu i działań w ramach komponentu po podłączeniu ich;

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

Answer 2

Utwórz akcję, w której wykonuje się żądanie do interfejsu API. Możesz użyć biblioteki takiej jak aksios lub pobranie, które zwróci obietnicę.

działania/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 
    }; 
} 

Następnie w reduktor, zużywają wynik obietnica raz uchwala się co następuje:

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

Kod pożyczone od Stephena Gridera. To jest jego repozytorium: https://github.com/StephenGrider/ReduxCasts/tree/master/weather/src