Asyncstorage в действии Redux - PullRequest
Новая
       11

Asyncstorage в действии Redux

0 голосов
/ 11 апреля 2019

Я пытаюсь использовать свой токен доступа (хранящийся в Asyncstorage) в действии Redux. Это мой код: 

export function fetchData() {
  const endpoint = 'someEndpoint.com';
  let accessToken = '';
  myAccessToken().then((token) => {
    accessToken = token;
  });

  return (dispatch) => {
    dispatch(getData());
    axios.get(endpoint, { headers: { 'access-token': accessToken } })
    .then(response => {
      dispatch(getDataSuccess(response.data));
    })
    .catch(error => {
      dispatch(getDataFailure(error));
    });
  };
}

const myAccessToken = async () => {
  try {
    const retrievedItem = await AsyncStorage.getItem('accessToken');
    return retrievedItem;
  } catch (error) {
    return null;
  }
};

Но извлечение ключа, очевидно, является асинхронным, я не уверен, как использовать accessToken в вызове API. Мне не разрешено делать что-то вроде этого: 

export function fetchData() {
  const endpoint = 'someEndpoint.com';
  myAccessToken().then((token) => {
    return (dispatch) => {
      dispatch(getData());
      axios.get(endpoint, { headers: { 'access-token': token } })
      .then(response => {
        dispatch(getDataSuccess(response.data));
      })
      .catch(error => {
        dispatch(getDataFailure(error));
      });
    };
  });
}

Мой магазин: 

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import app from './reducers';

export default function configureStore() {
  return createStore(app, applyMiddleware(thunk));
}

Обновление

В конце концов Я сделал это немного по-другому, По моему componentDidMount: 

componentDidMount() {
    AsyncStorage.getItem('accessToken').then((accessToken) => {
      this.setState({ accessToken });
      this.props.fetchData(accessToken);
    });
  }

Спасибо, Кевин.

1 Ответ

1 голос
/ 11 апреля 2019

Я думаю, вы должны использовать библиотеку redux-thunk для асинхронного обновления состояния редукции. Это легко настроить в файле store.js: 

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Тогда я бы реализовал это так: 

export function fetchData() {
  return async function(dispatch) {
     const endpoint = 'someEndpoint.com';
     const accessToken = await myAccessToken();
     try {
        const response = await axios.get(endpoint, { headers: { 'access-token': accessToken } });
        return dispatch(getDataSuccess(response.data));
     } catch (error) {
        return dispatch(getDataFailure(error));
     }
  }
}
...