如何异步/等待 redux-thunk 操作？

IT技术 reactjs react-native react-redux redux-thunk ecmascript-2017

2021-04-13 11:48:16

动作.js

export function getLoginStatus() {
  return async(dispatch) => {
    let token = await getOAuthToken();
    let success = await verifyToken(token);
    if (success == true) {
      dispatch(loginStatus(success));
    } else {
      console.log("Success: False");
      console.log("Token mismatch");
    }
    return success;
  }
}

组件.js

  componentDidMount() {
    this.props.dispatch(splashAction.getLoginStatus())
      .then((success) => {
        if (success == true) {
          Actions.counter()
        } else {
          console.log("Login not successfull");
        }
     });
   }

但是，当我使用 async/await 编写 component.js 代码时，如下所示，我收到此错误：

Possible Unhandled Promise Rejection (id: 0): undefined is not a function (evaluating 'this.props.dispatch(splashAction.getLoginStatus())')

组件.js

  async componentDidMount() {
     let success = await this.props.dispatch(splashAction.getLoginStatus());
     if (success == true) {
       Actions.counter()
     } else {
       console.log("Login not successfull");
     }
   }

我如何等待 getLoginStatus() 然后执行其余的语句？使用 .then() 时一切正常。我怀疑我的 async/await 实现中缺少某些东西。试图弄清楚这一点。

4个回答

Promise方法

export default function createUser(params) {
  const request = axios.post('http://www...', params);

  return (dispatch) => {
    function onSuccess(success) {
      dispatch({ type: CREATE_USER, payload: success });
      return success;
    }
    function onError(error) {
      dispatch({ type: ERROR_GENERATED, error });
      return error;
    }
    request.then(success => onSuccess, error => onError);
  };
}

异步/等待方法

export default function createUser(params) {  
  return async dispatch => {
    function onSuccess(success) {
      dispatch({ type: CREATE_USER, payload: success });
      return success;
    }
    function onError(error) {
      dispatch({ type: ERROR_GENERATED, error });
      return error;
    }
    try {
      const success = await axios.post('http://www...', params);
      return onSuccess(success);
    } catch (error) {
      return onError(error);
    }
  }
}

引用自用 async/await 解释 Redux 的 Medium 帖子：https : //medium.com/@kkomaz/react-to-async-await-553c43f243e2

为什么return success或return error？Redux 好像不使用这些？

2021-06-01 11:48:16

我不确定两个示例中的行为是否相同。在 Promise 方法中，onSuccess不会捕获调用内部的异常。在 async/await 方法中，onSuccess调用内部的异常将被捕获。这个onSuccess调用包含了所有的 redux state-change 和 react 重新渲染，任何导致这段代码的错误都会被吞掉。他们在这里讨论了这个：github.com/facebook/react/issues/6895

2021-06-08 11:48:16

重新混合阿斯彭的答案。

import axios from 'axios'

import * as types from './types'

export function fetchUsers () {
  return async dispatch => {
    try {
      const users = await axios
        .get(`https://jsonplaceholder.typicode.com/users`)
        .then(res => res.data)

      dispatch({
        type: types.FETCH_USERS,
        payload: users,
      })
    } catch (err) {
      dispatch({
        type: types.UPDATE_ERRORS,
        payload: [
          {
            code: 735,
            message: err.message,
          },
        ],
      })
    }
  }
}

import * as types from '../actions/types'

const initialErrorsState = []

export default (state = initialErrorsState, { type, payload }) => {
  switch (type) {
    case types.UPDATE_ERRORS:
      return payload.map(error => {
        return {
          code: error.code,
          message: error.message,
        }
      })

    default:
      return state
  }
}

这将允许您指定操作唯一的错误数组。

另一个异步的混音等待 redux/thunk。我只是发现这在编码Thunk( a function that wraps an expression to delay its evaluation~ redux-thunk )时更具可维护性和可读性

动作.js

import axios from 'axios'
export const FETCHING_DATA = 'FETCHING_DATA'
export const SET_SOME_DATA = 'SET_SOME_DATA'

export const myAction = url => {
  return dispatch => {
    dispatch({
      type: FETCHING_DATA,
      fetching: true
    })
    getSomeAsyncData(dispatch, url)
  }
}

async function getSomeAsyncData(dispatch, url) {
  try {
    const data = await axios.get(url).then(res => res.data)
    dispatch({
      type: SET_SOME_DATA,
      data: data
    })
  } catch (err) {
    dispatch({
      type: SET_SOME_DATA,
      data: null
    })
  }
  dispatch({
    type: FETCHING_DATA,
    fetching: false
  })
}

减速器.js

import { FETCHING_DATA, SET_SOME_DATA } from './actions'

export const fetching = (state = null, action) => {
  switch (action.type) {
    case FETCHING_DATA:
      return action.fetching
    default:
      return state
  }
}

export const data = (state = null, action) => {
  switch (action.type) {
    case SET_SOME_DATA:
      return action.data
    default:
      return state
  }
}

可能未处理的Promise拒绝

好像你错过了.catch(error => {});你的Promise。试试这个：

componentDidMount() {
    this.props.dispatch(splashAction.getLoginStatus())
        .then((success) => {
            if (success == true) {
                Actions.counter()
            } else {
                console.log("Login not successfull");
            }
        })
        .catch(err => {
            console.error(err.getMessage());
        }) ;
}

其它你可能感兴趣的问题

上一篇如何滚动 div 以在 ReactJS 中可见？下一篇如何在 react.js 中递归渲染子组件