रेडक्स में एपीआई के माध्यम से डेटा कैसे लाया जाए?

Question

मैं रिस्पॉज/रेडक्स के साथ एक नौसिखिया हूं, रेडक्स ऐप में डेटा पुनर्प्राप्त करने के लिए एपीआई कॉल का उपयोग करने के उदाहरण का उपयोग करने के लिए सरल नहीं मिला। मुझे लगता है कि आप एक jquery AJAX कॉल का उपयोग कर सकते हैं लेकिन वहां संभावित संभावित विकल्प हैं?

Answer 1

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

यह रेडक्स, रेडक्स-थंक और fetch का उपयोग करता है।

कार्यप्रणाली प्राप्त करें;

(नोट::।। आप कई कार्यों जैसे fetchPostRequest एक लोडिंग सूचक प्रदर्शित करने के लिए इस्तेमाल किया जा सकता परिभाषित कर सकते हैं या आप अलग HTTP स्थिति कोड के मामले में विभिन्न कार्यों का प्रेषण कर सकते हैं)

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

ऊपर उपयोग क्रिया

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

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

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

और आपके reducer में आप पदों को राज्य में लोड कर सकते हैं;

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

आप उन्हें जोड़ने के बाद अपने घटक के भीतर राज्य और कार्यों तक पहुंच सकते हैं;

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

Answer 2

एक एक्शन बनाएं जहां आप अपने एपीआई को अनुरोध करते हैं। आप अक्षरों या fetch जैसी लाइब्रेरी का उपयोग कर सकते हैं जो एक वादा वापस कर देता है।

कार्यों/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 
    }; 
} 

फिर एक कम करने में

, एक बार हल हो वादा परिणाम का उपभोग इस प्रकार है:

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

कोड उधार स्टीफन ग्रिडर से। यह उसका रेपो है: https://github.com/StephenGrider/ReduxCasts/tree/master/weather/src