Redux 中的异步/等待答案

【问题标题】：Async/Await in ReduxRedux 中的异步/等待
【发布时间】：2018-03-26 16:43:04
【问题描述】：

所以，我有一个函数，可以将图像转换为 base64。这个函数是异步的，它在 Promise.all() 的帮助下转换了 4 张图像，然后我用接收到的字符串返回对象。所以，我导出异步函数。代码如下：

import IMAC from '../assets/Images/devices/mac_monitor.png';
import MACBOOK from '../assets/Images/devices/macbook_pro.png';
import IPHONE_8 from '../assets/Images/devices/iphone_8.png';
import MSI_LAPTOP from '../assets/Images/devices/msi_laptop.png';

function loadImage(img) {
    return new Promise((resolve, reject) => {
        toDataURL(img, function (dataUrl) {
            resolve(dataUrl);
        })
    });
}

function toDataURL(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
        let reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

const IMAC_IMG_BASE64 = loadImage(IMAC);
const MACBOOK_IMG_BASE64 = loadImage(MACBOOK);
const MSI_IMG_BASE64 = loadImage(MSI_LAPTOP);
const PHONE_IMG_BASE64 = loadImage(IPHONE_8);

export async function loadAllImages() {
    const result = await Promise.all([IMAC_IMG_BASE64, MACBOOK_IMG_BASE64, MSI_IMG_BASE64, PHONE_IMG_BASE64]);
    return [
        {
            id: 0,
            device: "Apple iMac",
            image: result[0],
            styles: {
                carousel_item: {
                    width: "41.6vw",
                    height: "auto",
                    top: "-4.095vw",
                    left: "-0.13vw"
                },
                carousel: {
                    height: "38vw",
                    margin: "50px 0"
                },
                device: {
                    width: "46.5vw",
                    height: "38vw",
                    marginLeft: "-23.25vw"
                }
            }
        },
        {
            id: 1,
            device: "Apple Macbook Pro",
            image: result[1],
            styles: {
                carousel_item: {
                    width: "37vw",
                    height: "auto",
                    top: "-4.4vw",
                    left: ".6vw"
                },
                carousel: {
                    height: "38vw",
                    margin: "50px 0"
                },
                device: {
                    width: "55vw",
                    height: "30vw",
                    marginLeft: "-27.5vw"
                }
            }
        },
        {
            id: 2,
            device: "MSI GP72VR 7RFX",
            image: result[2],
            styles: {
                carousel_item: {
                    width: "35vw",
                    height: "auto",
                    top: "-5.8vw",
                    left: ".5vw"
                },
                carousel: {
                    height: "38vw",
                    margin: "50px 0"
                },
                device: {
                    width: "50vw",
                    height: "34vw",
                    marginLeft: "-25vw"
                }
            }
        },
        {
            id: 3,
            device: "Iphone 8",
            image: result[3],
            styles: {
                carousel_item: {
                    width: "14vw",
                    height: "auto",
                    top: "-8.2vw",
                    left: "0"
                },
                carousel: {
                    height: "38vw",
                    margin: "50px 0"
                },
                device: {
                    width: "17.7vw",
                    height: "34vw",
                    marginLeft: "-8.85vw"
                }
            }
        },
    ];
}

然后，我有这个动作创建器，它是异步的，我从这个函数 (loadAllImages()) 接收数据，然后我调用 dispatch (p.s. - 我正在使用 redux-thunk)

export const loadConfigs = () => async dispatch => {
 const data = await loadAllImages();
 dispatch({type: "LOAD_DATA", payload: data});
};

另外，我有reducer，我在其中返回带有对象的有效负载，从被调用的调度接收

export default (sliderConfig = null, action) => {
    const {type, payload} = action;
    switch(type){
        case "LOAD_DATA":
            return payload;
    }

    return sliderConfig;
}

在主容器 App.js 中，我在 componentDidMount() 中调用这个 AC （别看fetchUser()，在这种情况下没关系）

 componentDidMount() {
        this.props.fetchUser();
        this.props.loadConfigs();
    }

然后，我有一个组件，我正在使用这些数据，这些数据是从 AC 异步接收的。（别看appDesign()，在这种情况下没关系）

import React, {Component, PureComponent} from 'react';
import appDesign from '../../../decorators/scroll_resize_decorator';
import Slider from './Slider';
import {connect} from 'react-redux';
import * as actions from '../../../actions';

//Hint: Use container for the images in the slider
//Because errors with movement is appeared
class BlockFour extends Component {

    render() {

        if (this.props.sliderElements) {
            const {sliderElements, width, config, selectConfig} = this.props;
            return (
                <div className="blockfive">
                    <div className="blockfive--inner">
                        <div className="blockfive__container">
                            <div className="blockfive__container__header">
                                <div className="blockfive__container__header__container">
                                    <h1>Application Gallery</h1>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                        A aliquid blanditiis consequuntur debitis deserunt eaque eligendi
                                    </p>
                                    <div className="blockfive__header--divider"></div>
                                </div>
                            </div>
                            <div className="blockfive__container__device">
                                <h2>
                                    Choose your device to what screenshots
                                </h2>
                                <ul className="tabs">
                                    {
                                            sliderElements.map(item =>
                                            <li
                                                key={item.id}
                                                className="tab"
                                                >
                                                <a href="#"
                                                   onClick={
                                                       () => selectConfig(item.id)
                                                   }
                                                >
                                                    {item.device}
                                                </a>
                                            </li>
                                        )
                                    }
                                </ul>
                            </div>
                            <div className="blockfive__container__gallery">
                                {
                                        <Slider
                                        width={width}
                                        styles={sliderElements[config].styles}
                                        device_image={sliderElements[config].image}
                                    />
                                }
                            </div>
                        </div>
                    </div>
                </div>
            );
        }

        return null
    }
}

const mapStateToProps = ({sliderElements, config}) => {
    return {
        sliderElements,
        config
    }
};

export default connect(mapStateToProps, actions)(appDesign(BlockFour));

所以，这个语法是有效的，一切都在加载和工作。所以，我有一个问题：在 AC 中获取异步数据的正确方法是什么，然后将它们传递给 reducer，然后加载到组件中。我不想在我的组件中使用 if 语句。

我阅读了一些关于 async/await AC 以及如何使用它们的指南，但我并不完全了解如何在我的情况下使用它。你能否给我一个简短的指导如何在这里实现它。谢谢！

【问题讨论】：

您在该请求的回调中发出请求（获取或您将要使用的任何库）您有数据..然后您将该数据发送到减速器
这就是你正在做的事情。一点问题都没有。
@WilomGfx 它可以工作，是的，但我读了一些指南，人们在其中写了三个 AC，即 DATA_IS_FETCHING、DATA_IS_FETCHED 和 DATA_IS_LOADED。而且我不明白这种方法，我应该在这里使用它
@Remzes 我更喜欢 DATA_IS_FETCHING、DATA_FETCHED 和 DATA_FETCH_FAIL，这就是我所需要的。要知道这 3 种情况何时发生。
@WilomGfx 太好了，谢谢

标签： reactjs asynchronous promise redux redux-thunk

【解决方案1】：

我个人和大多数人都关注这个approach。它完全个人化，不会在您的应用中发生太大变化，但可能会让您的生活更轻松。

{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

这样，您的 UI 和连接到商店的应用的其他部分可以根据状态采取相应的行动。

示例包括：当FETCH_SMTH_REQUEST 被触发并且您的状态更改为正在获取时显示加载图标或消息，并在FETCH_SMTH_FAILURE 并且您在您的状态中获得error 时显示错误。

【讨论】：

【解决方案2】：

我个人更喜欢使用与内容同名的常量，作为 Type。像这样：

export const Types = {
  FETCH_DATA_START: "FETCH_DATA_START",
  FETCH_DATA_SUCCESS: "FETCH_DATA_SUCCESS",
  FETCH_DATA_FAIL: "FETCH_DATA_FAIL",
};

需要明确的是，在我从事的其他项目中，我没有发现任何错误和不同之处。至少在我看来，你的行动很棒。我可能会将它全部包装在一个 try...catch 子句中，以便最好地控制我的数据流。

只是要知道，如果需要，当您使用redux-thunk 时，您将实际状态作为第二个参数，如果需要，您可以在中间件配置中传递额外的参数作为第三个参数，就像 API举个例子。因此，您的代码可能如下所示：

export const fetchMySpecialData = () => async(dispatch, getState, API) => {
  try {
    dispatch({type: "FETCH_DATA_START"});    
    const data = await API.fetchData();
    dispatch({type: "FETCH_DATA_SUCCESS", payload: data});
  } catch (err) {
    dispatch({type: "FETCH_DATA_FAIL", error: err});
  }
};

【讨论】：