React/Redux - 不分派动作 [英] React/Redux - Not dispatching action

问题描述

我是响应 redux 的新手.我正在尝试使用foursquare api构建一个简单的餐厅应用程序.我有两个动作使 api 调用成为第一个.搜索餐厅和第二个以获取此类详细信息.

Action.js

export const fetchVenueDetail =venueId =>调度 =>{console.log("调度");调度({ 类型:FETCH_VENUE_REQUESTED })；拿来(`https://api.foursquare.com/v2/venues/${venueId}?client_id=${api_id}&client_secret=${api_key}&v=20180422`).then(res => res.json()).then(data => dispatch({ type: FETCH_VENUE, payload:data.response.venue })).catch(err => console.log(err));};

这是我的组件

class VenueDetail extends Component {componentDidMount() {this.props.fetchVenueDetail(this.props.match.params.id);}使成为() {console.log(this.props);const { 场地，isLoading } = this.props;console.log("此文本", 场地);返回 (<React.Fragment><Header type="venueDetail"venueDetail={venue}/><main className="main-content">
{ !isLoading ?<ImageListvenueDetail={venue}/>:<加载器/>}</节><div className="sidebar-wrapper"><Sidebar type="tips"venueDetail={venue}/>

</main></React.Fragment>)}};const mapStateToProps = state =>({场地:state.venueReducer.venue，isLoading: state.venueReducer.isLoading})导出默认连接(mapStateToProps，{fetchVenueDetail})(VenueDetail)；

经过测试后，我发现它没有发送操作，这就是我收到空响应的原因.

这是工作沙箱代码如果有人想检查 - https://codesandbox.io/s/7m4153p1jq

解决方案

实际问题，即您在 Sidebar 组件中开始请求之前收到错误.在您的请求完成之前，您的 venue 对象中没有组属性.

如果您在 "tips" 案例中添加这样的检查，它应该运行良好:

const itemTips =venueTips.tips.groups ?venueTips.tips.groups[0].items : [];

您可以将 groups 添加到您的 reducer 并检查 length 属性或选择其他方式，例如包装所有组件，包括 Sidebar组件，并显示 Loader 而不是它们.像这样:

VenueDetail.js

<代码>{(!isLoading &&venue.id) ?<React.Fragment>
<ImageListvenueDetail={venue}/></节><div className="sidebar-wrapper"><Sidebar type="tips"venueDetail={venue}/>

</React.Fragment>:<加载器/>}

这里是更新的codesandbox.

I am new to react redux. I am trying to build a simple restaurant app with foursquare api. I have two actions which makes api calls to 1st. search the restaurant and 2nd one to fetch details like this.

Action.js

export const fetchVenueDetail = venueId => dispatch => {
  console.log("dispatching");
  dispatch({ type: FETCH_VENUE_REQUESTED });
  fetch(
    `https://api.foursquare.com/v2/venues/${venueId}? 
     client_id=${api_id}&client_secret=${api_key}&v=20180422`
  )
    .then(res => res.json())
    .then(data => dispatch({ type: FETCH_VENUE, payload: 
     data.response.venue }))
    .catch(err => console.log(err));
};

Here is my component

class VenueDetail extends Component {
  componentDidMount() {
    this.props.fetchVenueDetail(this.props.match.params.id);
  }
  render() {
    console.log(this.props);
    const { venue, isLoading } = this.props;
    console.log("This text", venue);
    return (
      <React.Fragment>
        <Header type="venueDetail" venueDetail={venue} />
        <main className="main-content">
          <section className="venue">
            { !isLoading ? <ImageList venueDetail={venue} /> : <Loader /> }
          </section>
          <div className="sidebar-wrapper">
            <Sidebar type="tips" venueDetail={venue} />
          </div>
        </main>
      </React.Fragment>
    )
  }
};

const mapStateToProps = state => ({
  venue: state.venueReducer.venue,
  isLoading: state.venueReducer.isLoading
})

export default connect(mapStateToProps, {fetchVenueDetail})(VenueDetail);

After testing I figured out it is not dispatching the action that's why I am receiving an empty response.

Here is the working sandbox code If anyone wants to check- https://codesandbox.io/s/7m4153p1jq

解决方案

The actual problem, that you're getting error before your request starts in Sidebar component. There is no groups property in your venue object until your request is done.

If you add such check in your "tips" case it should run well:

const itemTips = venueTips.tips.groups ? venueTips.tips.groups[0].items : []; 

You can add groups to your reducer and check for length property or choose another way, like wrapping all of the component, including Sidebar component, and display Loader instead of them. Something like this:

VenueDetail.js

{
    (!isLoading && venue.id) ?
        <React.Fragment>
            <section className="venue">
                <ImageList venueDetail={venue}/>
            </section>
            <div className="sidebar-wrapper">
                <Sidebar type="tips" venueDetail={venue}/>
            </div>
        </React.Fragment> : <Loader/>
}

Here is updated codesandbox.

这篇关于React/Redux - 不分派动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！