adync / thunkアクションをasync / awaitする方法 -- reactjs フィールド と react-native フィールド と react-redux フィールド と redux-thunk フィールド と ecmascript-2017 フィールド 関連 問題

how to async/await redux-thunk actions?












49
vote

問題

日本語

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

component.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())')

component.js

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

GetLogInStatus()を待ってから残りのステートメントを実行する方法 使用するとき、すべてが非常にうまく機能します。私の非同期/ await実装に何かが足りないことを疑います。それを考えようとしています。

英語

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

component.js

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

However, when I write component.js code with async/await like below I get this error:

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

component.js

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

How do I await a getLoginStatus() and then execute the rest of the statements? Everything works quite well when using .then(). I doubt something is missing in my async/await implementation. trying to figure that out.

</div
              
   
   

回答リスト

46
 
vote

約束アプローチ

<事前> <コード> 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 / ASYNCでREDUXを説明した中からの参照: HTTPS: //medium.com/@kkomaz/react-to-async-await-553c43f243e2

 

The Promise approach

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

The async/await approach

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

Referenced from the Medium post explaining Redux with async/await: https://medium.com/@kkomaz/react-to-async-await-553c43f243e2

</div
 
 
   
   
10
 
vote

リミックス Aspen's Answer

<事前> <コード> 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 } }

これにより、アクションに固有のエラーの配列を指定できます。

 

Remixing Aspen's answer.

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

This will allow you to specify an array of errors unique to an action.

</div
 
 
3
 
vote

非同期の他のRemixはRedux / Thunkを待っています。 Thunk (<コード> a function that wraps an expression to delay its evaluation 〜 redux-thunk )

Actions.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 }) }

reducers.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 } }
 

Another remix for async await redux/thunk. I just find this a bit more maintainable and readable when coding a Thunk (a function that wraps an expression to delay its evaluation ~ redux-thunk )

actions.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   }) } 

reducers.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   } } 
</div
 
 
0
 
vote

不安定な約束拒否

あなたがあなたの約束について phpcs.bat index.php --standard=PSR2 --encoding=utf-8 --report=xml 0 が足りないようです。これを試してください:

<事前> <コード> phpcs.bat index.php --standard=PSR2 --encoding=utf-8 --report=xml 1
 

Possible Unhandled Promise Rejection

Seems like you're missing the .catch(error => {}); on your promise. Try this:

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
 
 

関連する質問

15  Async Adaitでコールバックをラップするにはどうすればよいですか。  ( How do i wrap a callback with async await ) 
私の関数は、HTTPサーバーが起動するとすぐに解決する約束を返します。これは私のコードです: <事前> <コード> function start() { return new Promise((resolve, reject) { th...

2  React-Nativeコンポーネントにおける非同期/ await関数の実装  ( Implementing async await function in react native component ) 
メインの 'App'コンポーネントをレンダリングする前にユーザーが認証されているかどうかをチェックする関数を実装しようとしていますが、約束が解決された後にコードを実行することはできません。 <事前> <コード> class App extends Compo...

373  非同期関数+ await + settimeoutの組み合わせ  ( Combination of async function await settimeout ) 
私は新しい非同期の特徴を使おうとしています、そして私の問題を解決することを願っています。これは働いている私のコードです: <事前> <コード> async function asyncGenerator() { // other code ...

2  Asyncを実行する方法/ ComponentWillUnmount内のXMLHTTPRequestを実行しますか?  ( How to abort running async await xmlhttprequest within componentwillunmount ) 
これはコードです...そのようなAjax呼び出しをどのように中止しますか? または、反応が反応するのを防ぐ方法 "マウントされていないコンポーネントで呼び出されたSetState"? (httpetはXMLHTTPRequestと約束のための単なるラッパーです...

4  Jasminを使用したASYNC / AWAITを使用して$ HTTPBACKENDを使用したアンキャラサービスのテスト  ( Testing angular service with httpbackend with async await using jasmin ) 
Jasmine-でES7非同期/ awaitシンタックスを使用する角度コントローラを以前にテストしました。 <事前> <コード> async updateGridAsync() { const paging = angular.copy(th...

1476  FOREACHループで非同期/待機してください  ( Using async await with a foreach loop ) 
await ループで async / <コード> await を使用する問題はありますか?各ファイルの内容で、ファイルの配列と await をループさせようとしています。 <事前> <コード> import fs from 'fs-promise' ...

2  オブジェクトリテラルに非同期関数を定義する方法  ( How can i define an async function in an object literal ) 
オブジェクト内で非同期関数を定義しようとするたびに、構文エラーがスローされます。 <事前> <コード> let obj = { fn: async function fn() { return 10; } } ...

0  eS7は、バックグラウンドで永遠にループする非同期機能を約束して待っています  ( Es7 promises and awaiting async function which loops forever in background ) 
これは特別な場合であるかもしれません: キュー(AWS SQS)から読み込みたい(AWS SQS)、メッセージのメッセージの数秒間待機してから解決し、その処理を処理する必要がある限り、もう一度コールします。キュー(毎回フラグをチェックします)。 これは、アプリ...

0  Async関数 - それらを実行するには?  ( Async functions require then to execute them ) 
約束は、電話をかけた場合にのみ実行されます。 それとも私がそれを学んだ方法です。 非同期関数は、関数を「回し」約束を理解しているものです。 ASYNC関数を呼び出したいたびに電話する必要がありますか? <事前> <コード> async function loa...

1  非同期のawaitのNode.jsスキップMongoDBの保存二のawait声明  ( Async await node js skips the second await statement save mongodb ) 
私はNode.jsのES6 ... でのawait非同期を使用しています <事前> <コード> async insertIngot(body, callback) { console.log('*** ItemsRepository.insertIn...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有