如何在 React/Redux 中获取和传递对象（JSON API）？答案

【问题标题】：How to get and pass object(JSON API) in React/Redux?如何在 React/Redux 中获取和传递对象（JSON API）？
【发布时间】：2017-11-03 13:20:27
【问题描述】：

我在通过道具从 React“容器”中的 Store 获取 JSON 对象（信息）并将其传递到他的子组件（InfoPage）时遇到问题。我也有 Action 和 Reducer 的方法，所有这些方法都没有错误。有人可以帮我解决这个问题。这是我来自“容器”的代码。谢谢。

function mapStateToProps(state) {
  return {
    user: state.auth.user,
    info: state.info,
    ui: state.ui
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Object.assign({}, uiActions,
    authActions, infoActions), dispatch);
}

class Info extends Component {

  static propTypes = {
    user: PropTypes.objectOf(PropTypes.any).isRequired,
    ui: PropTypes.objectOf(PropTypes.any).isRequired,
    info: PropTypes.objectOf(PropTypes.any).isRequired,
    switchProfileMenu: PropTypes.func.isRequired,
    logOut: PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);
    this.handleClickOption = this.handleClickOption.bind(this);
  }

  handleClickOption() {
    return this.props;
  }
  
  render() {
    const { user, logOut, info, ui: { showProfileMenu },
      switchProfileMenu } = this.props;

    return (
      <div className={b()}>
        <Header
          user={user}
          logOut={logOut}
          switchMenu={switchProfileMenu}
          showMenu={showProfileMenu}
        />
        <div className="container">
          <div className="content">
            <div>
              <InfoPage data={info} />
              sadasd
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【问题讨论】：

嘿伙计！这就是你的所有代码吗？您的组件是否使用connect 高阶组件连接到商店？我这里没看到！
几乎有一半的文件没有导入，是的，在容器底部有连接。 (导出默认连接(mapStateToProps, mapDispatchToProps)(Info);)
老兄，我看这里的代码没有任何问题！如果你的 reducer 创建了一个新对象并且你得到的 JSON 对象 (info) 有一些变化，那么一切都应该没问题！您如何调度操作以获取/更新信息 JSON 对象？
@Ematipico 我正在调度这样的动作：jsfiddle.net/vnam92/nvhf7e5d/1 你能帮助实现这一点吗.. 我需要在哪里以及如何调用这个方法来将 json 对象上传到容器的孩子中，按道具。
@Ematipico 也通知 webpack，组件的输入对象未定义...我有货...

标签： json reactjs redux react-router react-redux

【解决方案1】：

我看了你的代码，有一些缺失的部分。

首先，函数getInfo 看起来是一个thunk（redux-thunk，它允许您执行异步操作）。您必须在索引中导入它并初始化它，而不是数组

import thunk from 'redux-thunk'
// ...
createStore(rooReducer, applyMiddlewares(thunk))

你现在可以用一种简单的方式定义你mapDispatchToProps：

import getInfo from './actions'
//  ....
function mapDispatchToProps (dispatch) {
  return {
    dispatchGetInfo(id) {
      dispatch(getInfo(id))
    }
  }
}

在你的组件信息中，像这样实现：

componentDidMount () {
  const { dispatchGetInfo, params: { id } } = this.props
  // I PRESUME your `id` is inside the params of react router, feel free to change if not
  dispatchGetInfo(id) // => this should call your thunk which will call your consecutive dispatcher
}

编辑

您的索引文件应该包含修改后的行

<Route name="app:info" path="information/:id" component={Info} />

【讨论】：

我已经有一段时间不用redux-thunk了。我通常选择redux-saga。对我来说它看起来更整洁和简单
这取决于你的其余代码是如何完成的。我只是给了你一个应该如何返回动作的例子！最后，你真正要做的，是调用调用动作getInfo的函数。请检查我编辑的回复
是的，我想你可以:)