Как использовать состояние в файле действий redux в приложении RN?

Я создаю приложение RN с redux (+ thunk + persistant) и axios (+ перехватчик для обновления токена) для вызовов API.

Я организовал свою логику приложения как отдельные файлы с действиями, объединенными с вызовами API axios (потому что это очень понятно для меня) и редукторами в разных файлах.

И проблема в том, что жетоны обновления должны обрабатываться в файлах действий.

Например, файл простых действий "projects.js":

import createAuthRefreshInterceptor from 'axios-auth-refresh';
import axios from 'axios';


const refreshAuthLogic = failedRequest => axios.post('http://domain.pl/api/refresh-token').then(tokenRefreshResponse => {

    // >>>> save token to persistant part of REDUX ?????

    failedRequest.response.config.headers['Authorization'] = 'Bearer ' + // >>>> get token from persistant part of REDUX ?????;
    return Promise.resolve();
});


/*
 * action types
 */
export const FETCH_PROJECTS = 'FETCH_PROJECTS'


/*
 * API URL & config
 */
const apiUrl = 'http://domain.pl/api/projects';



/*
 * action creators
 */


export const fetchProjects = () => {
  return (dispatch, getState) => {
    const state = getState();
    createAuthRefreshInterceptor(axios, refreshAuthLogic);
    return axios.get(apiUrl, {headers: {'Authorization': "bearer " + state.auth.user.access_token }})
      .then(response => {

        dispatch(fetchProjectsSuccess(response.data))
      })
      .catch(error => {
        throw(error);
      });
  };
};

export const fetchProjectsSuccess =  (projects) => {
  return {
    type: FETCH_PROJECTS,
    projects: projects
  }
};

Я пытаюсь сделать это, как показано ниже, но всегда получаю некоторые ошибки. Доступ к состоянию Redux в создателе действия?

Как лучше всего обрабатывать токены доступа / обновления в файле действий (axios + redux)?

благодарю вас!


person user1253359    schedule 29.12.2019    source источник


Ответы (1)


Я бы полностью разделил логику обновления токена и действия redux. Для мира redux нет необходимости беспокоиться о том, как клиент api обрабатывает свой заголовок аутентификации. Попробуй это:

  1. Не выставляйте аксиомы прямо в модуле создания действий.
  2. Вместо этого переместите логику чистого запроса в отдельный модуль, где экземпляр axios создается один раз и используется для всех запросов.
  3. К этому клиентскому экземпляру можно прикрепить перехватчики ответов, которые автоматически обрабатывают обновление токена.
  4. Экспортируйте метод с именем getProjects, который импортируется модулем создания действия.
  5. Используйте getProjects в своем действии thunk fetchProjects, не заботясь об аутентификации, просто оставьте эту часть клиенту api.
person timotgl    schedule 29.12.2019