Async Image Load with React and Redux

Question

Я пытаюсь создать простую стену сообщения с контейнером <PostList />, который отображает список компонентов <Post />.

{posts.map(function (post: any) { 
       return <Post key={post.postid} post={post} />; 
      })} 

я прохожу в одном посте на Post компонент, который имеет <Avatar /> компонент, который отображает пользователей profile_pic внутри него в противном случае он отображает счетчик.

Мой вопрос в том, как разрешить компонентам отображать на экране и как только изображение загрузится, замените счетчик полученным изображением?

я в настоящее время имеют следующие Переходники и действия:

Редуктор Пользователь:

export default function(state = INITIAL_STATE, action : any){ 
    switch(action.type){ 
     case FETCH_USER_LOADING: 
      return Object.assign({}, state, {isLoading: true}); 
     case FETCH_USER_DONE: 
      return Object.assign({}, state, {users: state.users.concat(action.payload)}); 
} 

    return state; 
} 

Действия пользователя:

export function fetchUser(id: any) { 
    return function (dispatch: any) { 
     dispatch({ type: FETCH_USER_LOADING }); 
     return axios.get(`${ROOT_URL}/users/${id}`, { 
      headers: { token: localStorage.getItem('token') } 
     }) 
      .then(function (response) { 
       dispatch({type: FETCH_USER_DONE, payload: response.data}); 
       return response.data 
      }) 
    } 
} 

Answer 1

много способов сделать это.

Один из них состоит в том, чтобы написать свой собственный компонент, где недавно загруженное изображение запрашивает перерисовку в componentDidMount. Вот полный исходный код ленивого образа, который вы можете использовать в своем проекте:

export default class LazyImage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     loaded: false, 
     error: false 
    }; 
    } 

    componentDidMount() { 
    const img = new Image(); 
    img.onload =() => { 
     this.setState({ 
     loaded: true 
     }); 
    }; 
    img.onerror =() => { 
     this.setState({ 
     error: true 
     }); 
    }; 
    img.src = this.props.src; 
    } 

    render() { 
    if (this.state.error) { 
     return <img 
     className={this.props.className} 
     style={this.props.style} 
     src={this.props.unloadedSrc} 
     alt={this.props.alt} /> 
    } else if (!this.state.loaded) { 
     return <img 
     className={this.props.className} 
     style={this.props.style} 
     src={this.props.unloadedSrc} 
     alt={this.props.alt} /> 
    } 
    return <img 
     className={this.props.className} 
     style={this.props.style} 
     src={this.props.src} 
     alt={this.props.alt} /> 
    } 
} 

Какой бы вы затем использовать так:

<LazyImage unloadedSrc={unloadedSrc} src={src} /> 

И тогда, у Вас есть возможность с помощью множество компонентов, которые вы можете найти только прибегая к помощи терминам:

• «загрузке изображения реагировать»
• «реагирует изображения ленивых нагрузок»

или любой аналогичный термин поиска. Мой любимый компонент: react-imageloader.

Надеюсь, это поможет.