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

Question

我用的是Report-router-Redux我有这样的路由

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

在路由中加载与userId参数对应的用户对象的推荐方法是什么？

我的想法（我是新的反应

Answer 1

我建议您将该逻辑移动到容器组件，该组件将用户维护连接到redux存储

这将帮助您将数据层与不应该知道如何获取数据以进行渲染的表示组件分离。它只需要知道如何呈现这些数据。

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);

假设你有finchUseractionCreator。

我强烈建议您观看由Dan Abramov（Redux的创建者）在https://egghead.io.它是免费的，很好地涵盖了这个主题。

Answer 2

首先，您必须决定是否希望您的URL成为用户ID的真实来源（我建议如此）。

然后您就知道，只要URL/路由发生更改，并且在任何其他时间，您都将调度FETCH\u USER。

要从应用程序中的其他位置更改用户，只需浏览历史记录。按下（'/user/1234'），知道URL中的更改将触发对存储的更新。

如果你对此感到满意，只需在路线中调度动作：

<Route
  path="/user/:userId"
  components={{ body: UserMaintenance }}
  onEnter={state => {
    store.dispatch({
      type: ACTIONS.FETCH_USER,
      key: state.params.userId,
    });
  }}
/>

如果遵循此逻辑，则可能不需要react router redux。

这里是redux作者的有趣评论。