비동기 api는 redux-saga와 통화합니다

Question

도우미에게 나는 redux-saga documentation을 따르고 있으며 지금까지는 꽤 똑바로 보입니다. 그러나 API 호출을 수행 할 때 문제가 발생했습니다 (문서 점에 대한 링크가 표시됨). 그러한 예에)

설명이없는 부분이 Api.fetchUser이므로, 우리가 axios 또는 superagent과 같은 라이브러리로 처리해야하는 것이 있는지 조용히 이해하지 못합니까? 아니면 다른 것입니다. 그리고 무의미한 효과는 call, put 등입니다. get, post의 등가물입니까? 그렇다면 왜 그런 식으로 이름이 지어 집니까? 기본적으로 내가 URL을 example.com/sessions에서 내 API에 대한 간단한 후 호출을 수행하고 { email: 'email', password: 'password' }

Answer 1

Api.fetchUser처럼에게 데이터를 전달하는 올바른 방법을 알아 내려고 시도하고 API를 아약스 호출을 수행해야하는 기능, 그리고 그것은 약속을 반환해야합니다.

귀하의 경우이 약속은 사용자 데이터 변수를 해결해야합니다. 예를 들어

:

function* fetchUserSaga(action) { 
    // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function. 
    // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable 
    const userData = yield call(api.fetchUser, action.userId); 
    // Instructing middleware to dispatch corresponding action. 
    yield put({ 
    type: 'FETCH_USER_SUCCESS', 
    userData 
    }); 
} 

call, put 효과가 제작자의 함수이다 :

// services/api.js 
export function fetchUser(userId) { 
    // `axios` function returns promise, you can use any ajax lib, which can 
    // return promise, or wrap in promise ajax call 
    return axios.get('/api/user/' + userId); 
}; 

나서 무용담이다. 그들은 GET 또는 POST 요청에 익숙하지 않습니다.

call 함수는 미들웨어가 약속을 호출하도록 지시하는 효과 설명을 만드는 데 사용됩니다. put 함수는 효과를 생성합니다.이 효과는 미들웨어가 작업을 저장소로 보내도록 지시합니다.

Answer 2

같은 것은 call, put, take, race은 효과 생성자 기능입니다. Api.fetchUser은 API 요청을 처리하는 자신의 함수에 대한 자리 표시 자입니다. SessionService이 API에 HTTP 요청을 처리하는 login 방법을 구현하는 클래스이며,이 조각에서

export function* loginUserSaga() { 
    while (true) { 
    const watcher = yield race({ 
     loginUser: take(USER_LOGIN), 
     stop: take(LOCATION_CHANGE), 
    }); 

    if (watcher.stop) break; 

    const {loginUser} = watcher || {}; 
    const {username, password} = loginUser || {}; 
    const data = {username, password}; 

    const login = yield call(SessionService.login, data); 

    if (login.err === undefined || login.err === null && login.response) { 
     yield put(loginSuccess(login.response)); 
    } else { 
     yield put(loginError({message: 'Invalid credentials. Please try again.'})); 
    } 
    } 
} 

:

는 여기 loginSaga의 전체 예입니다. redux-saga call은이 메서드를 호출하고 data 매개 변수를이 메서드에 적용합니다. 위의 발췌 문장에서 통화 결과를 확인한 다음 put을 사용하여 loginSuccess 또는 loginError 작업을 적절하게 전달할 수 있습니다.

사이드 노트 : 위의 스 니펫은 USER_LOGIN 이벤트를 지속적으로 수신하지만, LOCATION_CHANGE이 발생하면 중단되는 loginSaga입니다. 이는 race 효과 작성자 덕분입니다.