更改 URL 并调用 redux 操作以获取 react redux 应用程序中的数据答案

【问题标题】：Change URL and call redux action to get the data in react redux application更改 URL 并调用 redux 操作以获取 react redux 应用程序中的数据
【发布时间】：2017-07-11 23:31:02
【问题描述】：

任何人都可以告诉我当您在服务器端使用 react-router 更改路由的 URL 以进行路由时如何调用操作。

我正在使用 react-router 的 browserHistory 将我的输入推送到 url。

import React from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';

class findBirthdays extends Component {
  constructor(props){
    super(props);
  }

  openCalender(){
    // here I open the date picker and let user select the date
    // then I add that date in the URL as "localhost:3000/find/?date=22-02-2017"
    // here I get confused as I do not know now how to dispatch the action or
    // how to access url params in a specific actions after dispatching that action
  }

  render(){
    return (
      // repeating all the birthday that are available on selected date
    )
  }
}

const mapStateToProps = (state) => {
  return {
    birthdayList: state.birthdays,
  };
};

export default connect(mapStateToProps)(findBirthdays);

我有很多输入，并且在每个输入更改事件中，都会附加 URL，这应该会导致调度操作并获得正确的结果。

我是 react 和 redux 的新手，所以如果有人可以建议是否可以这样做或如何解决这个问题，那将是有帮助的。谢谢大家。

【问题讨论】：

所以你想dispatch 和action 或者只是将route 更改为date-query？
@JyothiBabuAraja 如果我选择日期，它应该添加到 url 并且 url 更改应该调度将采取 url 参数进行进一步处理的操作。我已经完成了将它添加到 url 部分。我需要第二部分的帮助。
你可以阅读像this.props.location.query.date这样的url查询参数
@JyothiBabuAraja 我想在一个不在反应组件中的动作中阅读它。
然后在调度您的操作时将其作为参数发送。

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

【解决方案1】：

当 URL 改变时 componentWillRecevieProps 会自动调用，你可以访问 nextProps 然后你可以发送任何你想要的操作

在 nextProps 中，您可以访问包含您需要的关于 url 的所有内容的位置

【讨论】：

【解决方案2】：

对不起，我在代码中遗漏了一些东西，我通过以下方式解决了这个问题，

每当我更改输入时，我都会调度一个操作并更新 URL。
- 所以在上面的例子中，我将在

选择日期后的openCalender()函数。

当用户想要手动更改 URL 时，我会在服务器端进行处理。
- 当用户更改 URL 并按 Enter 时，这意味着服务器会呈现整个新页面。
- 我正在调度页面加载时的默认操作，

this.props.location.query

参数，由 react-redux-router 提供。

【讨论】：