redux에서 API를 통해 데이터를 가져 오는 방법은 무엇입니까?

Question

나는 reactjs/redux의 초보자이며 API 호출을 사용하여 redux 앱에서 데이터를 검색하는 방법에 대한 간단한 예제를 찾을 수 없습니다. jquery ajax 호출을 사용할 수 있지만 거기에는 더 좋은 옵션이있을 것 같습니까?

Answer 1

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

redux, redux-thunk 및 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" 
    } 
} 

그리고 감속기에서 상태로 게시물을로드 할 수 있습니다.

연결 한 상태에서 구성 요소의 상태 및 동작에 액세스 할 수 있습니다.

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

Answer 2

API 요청을 수행 할 작업을 만듭니다. axios 또는 fetch와 같은 라이브러리를 사용하여 약속을 반환 할 수 있습니다.

감속기/reducer_something.js을 :

행동 /하는 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 
    }; 
} 

는 한 번에 해결 약속의 결과를 소비

코드 빌려

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

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

    return state; 
} 

Stephen Grider에서. 이것은 그의 레포입니다 : https://github.com/StephenGrider/ReduxCasts/tree/master/weather/src