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

• なぜデータが来るまでレンダリングを保持したいのですか。間違った練習をして、Webアプリケーションを遅くします。
• と反応の美しさは、データが来ると、それはビューの一部を更新し、あなたはデータを見ることができます。

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

• フォロー -
• あなたがエラーを回避するために、あなたの非同期データをロードしたいのチェック、何かこのような他のコンポーネントに小道具としてデータを送信して配置することができますこの方法では、ユーザはfulldataが来るのを待つのではなく、 秒の分数で何かを見ることができます。
• は1つだけですあなたのコードをもっと説明できるとすれば、私は助けることができるかもしれません。