Question

我正在尝试在Redux操作中使用我的访问令牌（存储在Asyncstorage中）。这是我的代码：

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

但是密钥的获取显然是异步的，我不确定如何在API调用中使用accessToken。我不允许这样做：

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

更新

In the end我做了一点不同，在我的componentDidMount中：

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

谢谢，凯文。

Answer 1

我认为您应该使用redux-thunk库进行redux状态的异步更新。在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));
     }
  }
}

Redux动作中的异步存储

1 个答案: