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

Question

谁能告诉我如何在服务器端更改路由的 URL 时如何调用操作 react redux 组件与 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 的新手，所以如果有人可以建议这是否可以完成或如何解决这个问题，那将会很有帮助。谢谢大家。

Answer 1

当 URL 更改时，componentWillRecevieProps 将自动调用，您可以在那里访问 nextProps 然后您可以调度任何您想要的操作

在 nextProps 中，您可以访问包含您需要的关于 url

的一切的位置

Answer 2

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

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

openCalender() function after selecting the date.

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

this.props.location.query

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

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

Change URL and call redux action to get the data in react redux application

reactjs

react-router

redux

react-redux

react-router-redux