使用異步/等待在reactx應用程序的最佳約定

我想知道我們可以在React Redux（使用thunk）中使用async/await的哪些不同方式，並且如果有良好的約定，它們是什麼？我認爲它會是不錯的：使用異步/等待在reactx應用程序的最佳約定

在容器中，而不是必須使用的承諾then()，如this.props.myAction.then（...）
就不能有類方法中的async關鍵字，但在方法體中呢？例如：

異步DoSomething的（）{ 常量數據=等待this.props.myAction（）的console.log（數據） }

//但也許（它的失敗對我來說，如果動作是類似於我的工作行爲示例*請參閱下面） doSomething（）{處理器= async（）=>等待this.props.myAction（）/ /我想這裏的等待是多餘的，但添加清楚，給你 const data = handler（） console.log（data） }

0此刻

我工作的解決方案如下：

// MOCK data 
const MOCK_DATA = [1, 2, 3, 4, 5] 

// Action 
export function myAction (payload) { 
    return async (dispatch) => { 
    const getter =() => { 
     const promise = new Promise((resolve, reject) => { 
     setTimeout(() => { 
      resolve({serverResponse: MOCK_DATA}) 
     }, 1200) 
     }) 
     return promise 
    } 

    try { 
     return await getter() 
    } catch (error) { 
     console.log(error) 
    } 
    } 
} 

// Container 
class Foobar extends Component { 
    async doSomething() { 
    const data = await this.props.myAction() 
    } 
    render() { 
    return (
     <div> 
     <button onClick={this.doSomething}>Do something!</button> 
     </div> 
    ) 
    } 
}

來源

2017-06-21 punkbit

的問題「等待」是要阻止事件循環，並與咚你必須&調度員直接處理的承諾。

Thunk的替代方案更易於使用。 redux-auto

從documantasion

終極版，自動只需通過允許您創建一個「動作」函數返回一個承諾固定此同步的問題。伴隨你的「默認」功能動作邏輯。

不需要其他Redux異步中間件。例如thunk的，承諾的中間件，佐賀
輕鬆讓你一個承諾傳遞到終極版並將它管理你
允許您合作的定位與在那裏他們將被改造
命名外部服務調用文件「init.js」將在應用程序啓動時調用一次。這是很好的開始從服務器加載數據

的想法是讓每個action in a specific file。將文件中的服務器調用與「還原」，「已完成」和「已拒絕」的還原器功能共同定位。這使得處理承諾非常容易。

你例子是這樣的：

// MOCK data 
const MOCK_DATA = [1, 2, 3, 4, 5] 

// data/serverThing.js 
export default function (data, payload, stage, result) { 

    switch(stage){ 
    case 'FULFILLED': 
     return result.serverResponse; 
    case 'REJECTED': 
     const error = result; 
     console.log(error) 
    case 'PENDING': 
    default : 
     break; 
    } 
    return data; 
} 

export function action (payload) { 
    return Promise.resolve({serverResponse: MOCK_DATA}) 
} 

// Container 

import React from "react" 
import actions from 'redux-auto' 
import { connect } from 'react-redux' 

class Foobar extends Component { 

    const loading = (true === this.props.data.async.serverThing) ? "loading..." : ""; 

    render() { 
    return (
     <div> 
     <button onClick={()=>actions.data.serverThing()}>Do something!</button> { loading } 
     </div> 
    ) 
    } 
} 

const mapStateToProps = ({ data }) => { 
    return { data } 
}; 

export default connect(mapStateToProps)(Foobar);

它還會自動附加一個helper object(called "async")你的國家的原型，讓您在您的UI跟蹤，要求過渡。

來源

2017-06-25 07:58:05 codemeasandwich

使用異步/等待在reactx應用程序的最佳約定

回答

相關問題