Question

我使用的是react-router-redux，我有这样的路线

<Route path="/user/:userId" components={{ body: UserMaintenance }} />

建议的方法是加载路径中userId参数对应的用户对象吗？

我的想法（我是反应和减少的新手）将使用UserMaintenance componentWillReceiveProps方法中的userId参数，并将FETCH_USER操作发送到将加载到的商店state.currentUser。然后，当作为操作的结果更新currentUser参数时，UserMaintenance组件将更新。

Answer 1

首先，您必须决定是否希望您的网址成为userId的真实来源（我建议如此）。

然后您知道，无论何时网址/路线发生变化，您都不会在其他时间发送type(request)。

要从应用程序中的其他位置更改用户FETCH_USER，并且知道URL中的更改将触发对商店的更新。

如果您对此感到满意，只需在路线中发送动作：

browserHistory.push('/user/1234')

如果您遵循此逻辑，则可能不需要<Route path="/user/:userId" components={{ body: UserMaintenance }} onEnter={state => { store.dispatch({ type: ACTIONS.FETCH_USER, key: state.params.userId, }); }} />。

redux over here的作者的有趣评论。

Answer 2

我建议你将Container Component connects UserMainenance的{{1}}移到你的redux store

这可以帮助您将数据层与Presentational Component分开，这些数据层不应该知道如何获取数据。它只需要知道如何呈现该数据。

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {fetchUser} from './actions';
import UserMaintenance from './UserMaintenance';

class UserContainer extends Component {
  componentWillMount() {
    const {fetchUser, userId} = this.props;
    fetchUser(userId);
  }

  render() {
    return (
      <UserMaintenance {...this.props} />
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  userId: ownProps.params.userId
  user: state.user,

});

export default connect(
  mapStateToProps, {fetchUser}
)(UserContainer);

假设您有fetchUser actionCreator。

我强烈建议您在Browse the Building React Applications with Idiomatic Redux course上观看Dan Abramov（Redux的创作者）的https://egghead.io。它是免费的并且很好地涵盖了这个主题。

如何使用redux从路径参数加载对象

2 个答案: