React Redux - данные ответа на загрузку перед визуализацией

Question

Может кто-то, пожалуйста, помогите мне в этом. Я вижу ответ от api, но когда страница отображается, ответ слишком поздний для рендеринга. Я не мог найти, что я делаю неправильно. Я был бы очень признателен, если бы кто-нибудь мог объяснить. Благодаря

Ниже мой редуктор

export default function reducer(state = { 
    responseCode : { 
    }, 
    fetching: false, 
    fetched: false, 
    error: null 
}, action){ 
    switch(action.type){ 
    case 'FETCH_RESPONSECODE_PENDING' : { 
     return { ...state, fetching: false} 
     break; 
    } 
    case 'FETCH_RESPONSECODE_ERROR' : { 
     return { ...state, fetching: false, error: action.payload } 
    } 
    case 'FETCH_RESPONSECODE_FULFILLED' : { 
     return{ 
     ...state, 
     fetching: false, 
     fetched: true, 
     responseCode: action.payload 
     } 
     break; 
    } 
    } 
    return state; 
} 

// SearchResponseCode Компонент

handleSearch(event){ 
    event.preventDefault(); 
    } 

render(){ 
    return (
     <form> 
     <div className="col-xs-8"> 
      <input type="number" className="form-control" placeholder="e.g. main mailing response code or recruitment campaign code" ref="responseCode" /> 
     </div> 
     <div className="col-xs-4"> 
      <button className="btn btn-default" onClick={this.handleSearch.bind(this)}>Search</button> 
     </div> 
     </form> 

    )  
    } 

// Главный компонент

import SearchResponseCode from './search-response-code' 
import { connect } from 'react-redux' 
import { fetchResponseCode } from '../../actions/responseCodeActions' 

@connect((store)=>{ 
    return{ 
    responseCode: store.responseCode.responseCode 
    }; 
}) 
    fetchResponseCode(){ 
    this.props.dispatch(fetchResponseCode(brandUrl, 2570010)) 
    } 


    render(){ 
    const { responseCode } = this.props 
    console.log(this.responseCode) 
    return(
     <Tabs selectedIndex={0}> 
     <TabList> 
      <Tab>Search By Responce Code</Tab> 
      <Tab>Search By Item Code</Tab> 
      <Tab>Searh All</Tab> 
     </TabList> 
     <TabPanel> 
      <SearchResponseCode fetchResponseCode={this.fetchResponseCode.bind(this)} /> 
     </TabPanel> 
     <TabPanel> 
      <SearchItemCode /> 
     </TabPanel> 
     <TabPanel> 
     </TabPanel> 
     </Tabs> 
    ) 
    } 
} 

// Действие

import axios from 'axios' 

export function fetchResponseCode(brandUrl, responseCode){ 
    let url = brandUrl + '/api/offer/' + responseCode; 

    return function(dispatch){ 
    axios.get(url) 
     .then((response) => { 
     dispatch({ 
      type : 'FETCH_RESPONSECODE_FULFILLED', 
      payload : response.data 
     }) 
     }) 
     .catch((err) => { 
     dispatch({ 
      type : 'FETCH_RESPONSECODE_ERROR', 
      payload : err 
     }) 
     }) 
    } 
} 

Answer 1

Ничего не произойдет, так как вы ничего не вызываете внутри своего SearchResponseCode.handleSearch.

В этой функции вам необходимо вызвать fetchResponseCode.

// SearchResponseCode компонент

handleSearch(e) { 
    e.preventDefault(); 
    const input = this.refs.responseCode.value; //you should avoid using ref="string" 
    this.props.fetchResponseCode(input); 
} 

Конечно, вы должны изменить свой метод fetchResponseCode внутри основного компонента, чтобы принять параметр и передать его в действие для отправки.

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

Answer 2

• Почему вы хотите удерживать рендер до тех пор, пока не появятся данные. Это неверная практика и делает ваш webapp медленнее.
• и красота реакции, так как данные приходят, он обновляет часть представления, и вы можете видеть данные.
• вы можете передавать данные в качестве опоры для других компонентов и поместить чек, где вы хотите, чтобы загрузить данные асинхронных, чтобы избежать ошибок, что-то вроде этого -

//suppose you will get an address object from api ,which will contain city ,area ,street ,pin code etc 
 
// address={} intially address is a blank object 
 
render(){ 
 
    return(
 
     (typeof address.area!='undefined')? 
 
     <div> 
 
     <div>{address.city}</div> 
 
     <div>{address.street}</div> 
 
     <div>{address.pin_code}</div> 
 
     <div>{address.area}</div> 
 
     </div> 
 
     :<div>loading....</div> 
 
    ) 
 
}

• последующее таким образом, пользователь может видеть что-то во фракции секунд, вместо того, чтобы ждать фульдаты, чтобы прийти
• выше всего лишь один Кстати, если бы вы могли объяснить свой код больше, я мог бы помочь