Redux &React Router:结合调度和导航(history.push) [英] Redux & React Router: Combing dispatch and navigation (history.push)

问题描述

我对如何使用 React Router 的 history.push('/route') 和 Redux 有点无知.

换句话说，如果你将一个组件与 Redux 的 mapDispatchToProps 连接起来，你如何放置应该在之后触发的 history.push('/route')调度某个动作?

为了澄清这个问题，这里是我的实验片段...

class PostContainer 扩展 React.Component {处理提交(数据){返回 this.props.addPost(data);}使成为() {return (<Post onSubmit={data=> this.handleSubmit(data)}/>);}}const mapDispatchToProps = (调度) =>{返回 {addPost: (数据) =>{dispatch(addPost(data)).data.then((result) => {dispatch(addPostFulfilled(result.data));//你如何调用下面的函数?this.props.history.push('/posts')}).catch((错误) => {调度(addPostRejected())；});},}}导出默认连接(null，mapDispatchToProps)(PostContainer)；

如您所见，一旦帖子通过addPostFulfilled添加到Redux的状态，页面需要通过history.push移动到/posts.>

根据 Redux 的文档，容器用于更新状态(以及获取数据).所以，愚蠢的组件不应该像 history.push 这样的东西.

有什么比上面的代码更好的方法?

任何建议将不胜感激.

解决方案

您可以使用 react-router-redux(需要初始设置)并从操作创建者处分派您的操作

import { push } from 'react-router-redux'class PostContainer 扩展 React.Component {处理提交(数据){返回 this.props.addPost(data);}使成为() {返回 (<div><Post onSubmit={data=>this.handleSubmit(data)}/>

);}}const mapDispatchToProps = (调度) =>{返回 {addPost: (数据) =>{dispatch(addPost(data)).data.then((result) => {dispatch(addPostFulfilled(result.data));//你如何调用下面的函数?dispatch(push('/posts'));}).catch((错误) => {调度(addPostRejected())；});},}}导出默认连接(null，mapDispatchToProps)(PostContainer)；

或者只是将推送作为完成回调"传递.

class PostContainer 扩展 React.Component {处理提交(数据，完成){返回 this.props.addPost(data, done);}使成为() {const { push } = this.props.history;返回 (<div><Post onSubmit={data=>this.handleSubmit(data, push)}/>

);}}const mapDispatchToProps = (调度) =>{返回 {addPost:(数据，完成)=>{dispatch(addPost(data)).data.then((result) => {dispatch(addPostFulfilled(result.data));//你如何调用下面的函数?完成('/帖子')}).catch((错误) => {调度(addPostRejected())；});},}}导出默认连接(null，mapDispatchToProps)(PostContainer)；

I'm a bit clueless as to how to use React Router's history.push('/route') with Redux.

In other words, if you connect a component with Redux's mapDispatchToProps, how do you put history.push('/route') that is supposed to be fired after dispatching a certain action?

To clarify the issue, here is a snippet of my experimentation...

class PostContainer extends React.Component {

    handleSubmit(data) {
        return this.props.addPost(data);
    }

    render() {
        return (<Post onSubmit={data=> this.handleSubmit(data)}/>);
    }
}

const mapDispatchToProps = (dispatch) => {
    return {    
        addPost: (data) => {
            dispatch(addPost(data)).data.then((result) => {
                dispatch(addPostFulfilled(result.data));

                //How do you call the following function?
                this.props.history.push('/posts')
            }).catch((error) => {
                dispatch(addPostRejected());
            });
        },      
    }
}

export default connect(null, mapDispatchToProps)(PostContainer);

As you can see, as soon as a post is added into Redux's state through addPostFulfilled, the page needs to move to /posts via history.push.

According to Redux's doc, containers are made for updating states (as well as fetching data). So, dumb components are not supposed to put anything like history.push.

What would be a better approach than the code above?

Any advice will be appreciated.

解决方案

You can either user react-router-redux (require an initial set up) and dispatch your action from action creators

import { push } from 'react-router-redux'
class PostContainer extends React.Component {

  handleSubmit(data) {
    return this.props.addPost(data);
  }

  render() {
    return (
      <div>
        <Post onSubmit={data=> this.handleSubmit(data)}/>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {    
    addPost: (data) => {
      dispatch(addPost(data)).data.then((result) => {
        dispatch(addPostFulfilled(result.data));

        //How do you call the following function?
        dispatch(push('/posts'));
      }).catch((error) => {
        dispatch(addPostRejected());
      });
    },      
  }
}
export default connect(null, mapDispatchToProps)(PostContainer);

or just pass push as a "done callback".

class PostContainer extends React.Component {

  handleSubmit(data, done) {
    return this.props.addPost(data, done);
  }

  render() {
    const { push } = this.props.history;
    return (
      <div>
        <Post onSubmit={data=> this.handleSubmit(data, push)}/>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {    
    addPost: (data, done) => {
      dispatch(addPost(data)).data.then((result) => {
        dispatch(addPostFulfilled(result.data));

        //How do you call the following function?
        done('/posts')
      }).catch((error) => {
        dispatch(addPostRejected());
      });
    },      
  }
}

export default connect(null, mapDispatchToProps)(PostContainer);

这篇关于Redux &React Router:结合调度和导航(history.push)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！