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

Posted 2023-02-22

【中文标题】如何在 React/Redux 中获取和传递对象（JSON API）？

【英文标题】：How to get and pass object(JSON API) in React/Redux?

【发布时间】：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，组件的输入对象未定义...我有货...

【参考方案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的函数。请检查我编辑的回复

是的，我想你可以:)