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

Question

我正在使用 react-router-redux 并且我有这样的路由

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

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

我的想法（我是 React 和 redux 的新手）是在 UserMaintenance componentWillReceiveProps 方法中使用 userId 参数，并将 FETCH_USER 操作分派到将加载到 state.currentUser。当 currentUser 参数因操作而更新时，UserMaintenance 组件将随之更新。

Answer 1

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

那么你就知道只要 URL/route 发生变化，你就会调度 FETCH_USER。

要从应用内的其他地方更改用户，您只需 browserHistory.push('/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 作者的有趣评论 .

Answer 2

我建议您将该逻辑移至 Container Component，将 connects UserMainenance 移至您的 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 by Dan Abramov (creator of Redux) on https://egghead.io。它是免费的，并且很好地涵盖了这个主题。

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

How to load object from route parameter using redux

reactjs

redux

react-router-redux