Async/Await 在 Redux 中

Question

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

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()) 接收数据，然后调用调度（p.s。-我正在使用 redux-thunk）

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

另外，我有 reducer，其中我 return 带有对象的有效载荷，从调用的调度中接收

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 以及如何使用它们的指南，但我不完全了解如何在我的情况下使用它。能否请你给我一个简短的指导如何在这里实施它。谢谢！

Answer 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 .

Answer 2

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

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

Async/Await 在 Redux 中

Async/Await in Redux

asynchronous

promise

reactjs

redux

redux-thunk