0
그래서, 나는 base64로 이미지를 변환하는 함수가있다. 이 함수는 비동기식이며 Promise.all()을 사용하여 4 개의 이미지를 변환 한 다음받은 문자열로 객체를 반환합니다. 그래서 비동기 함수를 내 보냅니다. 여기에 코드입니다 : 다음비동기/대기중인 Redux
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())에서 수신 된 데이터를 비동기가있다이 작업 작성자을 가지고, 그리고 내가 파견에게 전화 (추신 - 내가 사용하고 redux- 또한)
export const loadConfigs =() => async dispatch => {
const data = await loadAllImages();
dispatch({type: "LOAD_DATA", payload: data});
};
을 썽크, 내가, 내가 개체와 페이로드를 반환 할 경우, 감속기가 메인 컨테이너 App.js 내부 호출 파견
export default (sliderConfig = null, action) => {
const {type, payload} = action;
switch(type){
case "LOAD_DATA":
return payload;
}
return sliderConfig;
}
로부터받은, 나는 콤포넌트 안에이 AC 전화 nentDidMount() 내가 비동기 AC로부터받은이 데이터를 사용하고 있습니다 어디 그럼 난, 구성 요소가,
componentDidMount() {
this.props.fetchUser();
this.props.loadConfigs();
}
을 그리고 (이 상황에서 중요하지 않습니다 fetchUser() 보지 말라).
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));
그래서,이 구문은 작동하고, 모든로드와 노력 (appDesign() 보지 말라,이 맥락에서 중요하지 않습니다). 그래서, 나는 질문 : AC에서 비동기 데이터를 가져 오는 올바른 방법은 무엇입니까 다음 그들을 감속기로 전달하고 구성 요소 내부에로드합니다. 내 구성 요소 내에서 if 문을 사용하고 싶지 않습니다.
비동기/대기 AC에 대한 몇 가지 가이드를 읽고이를 어떻게 사용하는지는 내 상황에서 어떻게 사용하는지 완전히 이해하지 못했습니다. 여기에 구현하는 방법을 알려주시겠습니까? 고맙습니다!
당신은 데이터를 가지고있는 요청의 콜백에서 요청 (가져 오기 또는 사용하려는 라이브러리)을 수행합니다. 그런 다음 데이터를 감속기로 보냅니다. –
그게 당신이하는 일입니다. 전혀 문제 없습니다. – WilomGfx
@WilomGfx 그래, 작동하지만 사람들이 세 개의 AC 즉 DATA_IS_FETCHING, DATA_IS_FETCHED 및 DATA_IS_LOADED를 쓰는 몇 가지 안내서를 읽습니다. 그리고 나는이 접근법을 이해하지 못한다. 여기서는 사용해야한다. – Remzes