React/Redux firing action->店舗を更新する前にレンダリング

Question

Aは単純に反応する/還元するアプリを持っています。 I非同期APIからデータを取得しますが、データを待機せずにコンポーネントを起動します。

自分の行動に

class RestaurantList extends React.Component { 
componentWillMount() { 
    this.props.getRestaurantList(); 
} 

render() { 
    console.log("render"); 
    let {translation} = store.getState().app; 
    //------------I NEED DATA ON THIS LET (restaurantList) 
    let {restaurantList} = this.props.restaurants; 


    return (
     <div> 
      <TableContainer data={restaurantList}/> 
     </div> 

    ) 


    } 
} 
const mapStateToProps = (state) => { 
return { 
    restaurants: state.restaurants 
}; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     getRestaurantList() { 
      dispatch(ACTIONS.getRestaurantList()); 
     }, 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList); 

私はaxiosを使用してデータをフェッチ：その後

export function getRestaurantList() { 
console.log("action"); 
return dispatch => { 
    axios({ 
     method: "GET", 
     url: URLS.BASE_URL + URLS.URL_RESTAURANT_LIST 
    }).then((response) => { 
     console.log(response); 
     dispatch({ 
      type: CONST.GET_RESTAURANT_LIST, 
      payload: response.data 
     }) 
    }) 
} 
} 

そして、私のコンポーネント解雇法のComponenWillMountレンダリング（）、次の店舗の更新ストアと私には良いデータを設定変数。たぶん私は私のテーブルに私は転送未定義を転送するため、私の取得データをレンダリングするためにそれを行う方法を私に助言を与えるかもしれません。たぶん、あなたは私にredux-sagaまたは他のような別のフレームワークを使用する例を与えるかもしれません。

Answer 1

あなたはテーブルのみ利用可能なデータがある、一度にレンダリングされますので、あなたのTableContainerコンポーネントをレンダリング条件付きで試みることができる：

renderTable() { 
    let { restaurantList } = this.props.restaurants 

    if (restaurantList) { 
    return <TableContainer data={ restaurantList } /> 
    } else { 
    return <div></div> 
    } 
} 

render() { 
    return (
    <div> 
     { this.renderTable() } 
    </div> 
) 
}