React native Redux操作中的异步存储

我正在尝试在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));
    });
  };
}

但是获取密钥显然是异步的，我不确定如何在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));
}

更新

我做的有点不同，在我的

组件didmount

：

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

---

谢谢，凯文。

我认为您应该使用

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

---

你好@alexgomez0120！我尝试了您的建议，这导致了以下错误：

error:操作必须是普通对象。使用自定义中间件进行异步操作。（我已经实现了

redux thunk`）@kevinestore我已经编辑了我的答案，假设

fetchData（）

是一个作为操作返回函数的操作创建者。还要考虑到

getDataSuccess（）

和

getDataFailure（）

函数应该返回redux操作类型的对象，如：

{type:“FETCH_SUCCESS”，data:{}

谢谢您的帮助！我用当前的解决方案更新了我的问题！

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