何时以及如何在react / router / redux应用程序中获取详细视图的数据?

问题描述 投票:3回答:1

说我已经为/accounts/accounts/:id构建了一个后端API,而我的React应用程序具有一个AccountList组件来获取挂载的帐户。这会将列表存储在redux存储中。到目前为止,一切都很好。现在,当我导航到/accounts/1时,我有3个选项,我想了解设计架构的最佳方法。

  1. 链接到/accounts/1会调用<AccountDetail ...>,并带有特定帐户的所有属性,而AccountDetail仅显示它。不需要其他请求,但是由于未设置道具,浏览器重新加载或直接链接到/accounts/1将失败。
  2. 链接到/accounts/1仅设置属性id,并且AccountDetail组件通过API从后端获取内容。数据将一直存在,但是当我通过列表中的链接进入时(似乎已经为所有帐户加载了帐户数据),似乎触发了多余的呼叫。
  3. 从列表链接到/accounts/1会设置所有属性(直接通过浏览器调用时会丢失),但仅需要idAccountDetail将检查是否仅提供id并提取,否则从道具中获取数据。这增加了复杂的逻辑,让人感到奇怪。
  4. 链接到/accounts/1仅设置属性id,并且如果各个帐户不在React Store中,则AccountDetail组件会通过API从后端获取内容,否则它将从那里获取数据。这结合了1.和2的优点。但是,由于(我想)我不能只在mapStateToProps内部检查该组件,因为我需要触发一个异步API调用,因此向该组件添加了相当复杂的逻辑。

我当前的App.js

class App extends React.Component {
  render () {
    return (
      <BrowserRouter>
        <div>
          <NavBar />
          <main role='main'>
            <Route exact path='/' component={Home} />
            <Route exact path='/accounts' component={AccountOverview} />
            <Route path='/accounts/:id' render={({match}) => (<AccountDetail id={parseInt(match.params.id, 10)} />)} />
          </main>
        </div>
      </BrowserRouter>
    );
  }
}

nav_bar.js包含

<Menu.Item key={i} as={NavLink} to={item.to}>{item.text}</Menu.Item>

基本上是使用语义用户界面的<NavLink to='/accounts'>Accounts</NavLink>

[AccountsList呈现a

<Link to={'/accounts/' + id}>{service}</Link>

希望这很清楚。您如何处理?处理列表和详细信息的“通用”或“最佳”方法是什么?

reactjs redux react-router react-redux
1个回答
0
投票

我也遇到了同样的问题,在解决它时遇到了一些麻烦。对我有用的方法是,我做了一个详细的视图示例“ accounts /:id”,并在axios上的componentDidUpdate()或componentDidMount()的那个组件上通过axios调用了api,并使用redux在道具中获得了有效载荷。

componentDidMount() {
    this.props.getSingleEmail(this.props.match.params.id);
}

componentDidUpdate(prevProps) {
    if (prevProps.match.params.id !== this.props.match.params.id) {
        this.props.getSingleEmail(this.props.match.params.id);
    }
}

我认为您需要同时安装和更新,以防访问其他ID,因此componentDidMount将不会触发,并且在首次加载时componentDidUpdate将不会触发。

© www.soinside.com 2019 - 2024. All rights reserved.