Асинхронные вызовы api с redux-saga

Question

Я следую redux-saga documentation на помощниках, и пока это выглядит довольно прямолинейно, однако я наткнулся на проблему, когда дело доходит до выполнения вызова api (так как вы увидите ссылку на точки документов к такому примеру)

Существует часть Api.fetchUser, что не объясняется, таким образом, я не понимаю, успокаивать, если это то, что мы должны обращаться с библиотеками, как axios или superagent? или это что-то еще. И такие эффекты саги, как call, put и т. Д. Эквиваленты get, post? если да, то почему они названы именно так? По существу, я пытаюсь выяснить, как правильно выполнить простой пост вызов моему апи на URL example.com/sessions и передать его данные, такие как { email: 'email', password: 'password' }

Answer 1

Api.fetchUser является функцией, где должна быть выполнена апи АЯКС вызов и он должен вернуть обещание.

В вашем случае это обещание должно разрешить переменную пользовательских данных.

Например:

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

Тогда это сказания:

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 являются эффекты создатели функции. У них нет знакомых с GET или POST запросов.

call Функция используется для создания описания эффекта, которое инструктирует промежуточное программное обеспечение для вызова обещания. put Функция создает эффект, в котором инструктирует промежуточное программное обеспечение для отправки действия в хранилище.

Answer 2

Вещи, подобные call, put, take, race являются функциями создания эффектов. Api.fetchUser является заполнителем для вашей собственной функции, которая обрабатывает запросы API.

Вот полный пример loginSaga:

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.'})); 
    } 
    } 
} 

В этом фрагменте SessionService это класс, который реализует login метод, который обрабатывает запрос HTTP к API. Сокращение-сага call вызовет этот метод и применит к нему параметр данных. В приведенном выше фрагменте мы можем затем оценить результат вызова и отправки loginSuccess или loginError действий, используя put.

Замечание: фрагмент выше - это loginSaga, который постоянно прослушивает событие USER_LOGIN, но прерывается, когда происходит LOCATION_CHANGE. Это благодаря создателю эффекта race.