从组件内部的操作访问数据 |还原答案

【问题标题】：Access data from actions inside of components | Redux从组件内部的操作访问数据 |还原
【发布时间】：2017-08-09 00:41:54
【问题描述】：

我想让我的导航栏显示我从我的 API 获得的用户名。而且我可以在我的控制台中看到我正在获取带有密钥 name 的 user object。

所以我想知道访问数据的最佳做法是什么？顺便说一下，这是我导航栏中的一些 sn-ps！

class MainNavbar extends Component {
  logout(e) {
    e.preventDefault()
    this.props.logout()
  }
  render() {
    return (
      <Navbar inverse collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <div>
              <img id="logo" />
            </div>
          </Navbar.Brand>
          <Navbar.Toggle />

在底部：

MainNavbar.propTypes = {
  logout: React.PropTypes.func.isRequired
  // I guess I need to do something here
}

function mapStateToProps(state) {
  return {
    auth: state.auth
    // And here as well, but what? :O
  }
}

export default connect(mapStateToProps, { logout })(MainNavbar)

非常感谢您阅读这个糟糕的问题。我很感激我能得到的所有帮助！

谢谢！

【问题讨论】：

@AndyRay 这根本不是真的。当然，不接受答案是不好的（请接受您认为对未来读者有帮助的答案），但这不会导致您的帐户被“关闭”，无论这意味着什么。

标签： javascript reactjs redux

【解决方案1】：

要将用户名从 redux 状态映射到组件的 props，您需要：

将其添加到 propTypes。

MainNavbar.propTypes = {
    logout: React.PropTypes.func.isRequired,
    name: React.PropTypes.string
}

从 redux 状态映射新的 prop。您需要检查这是否正确映射到您所在的州

function mapStateToProps(state) {
  return {
    auth: state.auth
    name: state.user.name
  }
}

有条件地在组件中显示名称。

<Navbar.Header>
  <Navbar.Brand>
    <div>
      <img id="logo" alt="Qlocx Logo" src={qlocx} />
    </div>
  </Navbar.Brand>
  {this.props.name ? this.props.name : null}
  <Navbar.Toggle />

【讨论】：

是的，OP 没有发布整个 redux 商店，这就是为什么我写了“你需要检查它是否正确映射到你的状态”
感谢您的回复！顺便说一句，我喜欢你的名字，但这并没有成功！ :(
嗨@Martin你有你的redux商店中用户名的路径吗？另外，您如何访问组件的 render() 方法中的道具？

【解决方案2】：

你可能需要<Provider store>，然后你可以在组件中使用Redux store。

https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store

【讨论】：

你好，我已经提供了我的商店。
也许，在 render() 的 return 前加上 const {auth} = this.props 就可以这样使用了。
{auth}