Redux

Question

对于如何使用React路由器的历史记录，我有点不知所措。使用Redux推送（'/route'）。

换句话说，如果您使用Redux的mapDispatchToProps连接一个组件，那么如何放置历史记录。推送（“/route”）应该在调度特定操作后触发的按钮？

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

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

如您所见，一旦通过addpostmemplied将帖子添加到Redux的状态，页面就需要通过历史记录移动到/posts。推

根据Redux的文档，容器用于更新状态（以及获取数据）。因此，哑组件不应该放置任何类似历史的东西。按。

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

如有任何建议，将不胜感激。

Answer 1

恕我直言，您甚至可以从您的哑组件中执行history.push，即

const mapDispatchToProps = (dispatch) => {
    return {    
        addPost: (data) => {
            dispatch(addPost(data)).data.then((result) => {
                dispatch(addPostFulfilled(result.data));
                <!-- removed from here -->
            }).catch((error) => {
                dispatch(addPostRejected());
            });
        },      
    }
}

完成addPostCompleted数据后，您可以选择执行此操作。历史在组件本身中推送（'/route'）。您可以使用props更新时调用的任何lifefcycle方法来执行此操作。也许，将其添加到组件将接收道具。

class PostContainer extends React.Component {
  componentWillReceiveProps(nextProps){
  /*Added here*/
  if(nextProps.someFlag){ this.props.history.push('/someRoute');
}}

请注意，上述方法仅在以下情况下有效：

1. 您可以不通过存储跟踪位置更改。（阅读更多内容）

如果上面听起来像一大堆胡言乱语，你可以随时使用react-router-redux的ushAPI，它可以在浏览器历史记录中推送新条目。你可以在你选择的任何地方导入它，然后推送一条新路线。

详细信息可以在react router redux github页面和引用文档中看到

推送和替换都接收位置描述符，它可以是描述URL的对象或纯字符串URL。这些操作创建者也可以在一个对象中作为routerActions使用，当使用Redux的bindActionCreator（）时，可以方便地使用这些操作创建者。

因此，请使用历史记录。在mapDispatchToProps中直接推送（），或者将其作为道具传递给PostContainerreact组件。

Answer 2

更干净的方法可能是使用React路由器的

class PostContainer extends React.Component {
  render() {
    if (userJustAddedAPostRightNow === true) {
      return <Redirect to='/posts' />
    }
    return (
      <div>
        <Post onSubmit={addPost}/>
      </div>
    );
  }
}
export default connect(null, { addPost })(PostContainer);

addPost如果成功，将触发状态更改。它应该将userJustAddedAPostRightNow更改为true，这样您就可以重定向到帖子页面。

为了避免所有这些嵌套回调，您可以遵循Nir Kaufman的方法并在中间件中处理逻辑：

//src/middlewares/post.js
export const newPost = ({dispatch}) => next => action => {
  next(action);

  if (action.type === ADD_POST) {
    dispatch(apiRequest('POST', action.URL, null, ADD_POST_SUCCESS, ADD_POST_ERROR));
    dispatch(showSpinner());
  }
};

然后，在成功时，ADD_POST_success操作将通过您的reducer更改userJustAddedAPostRightNow的值。

Answer 3

您可以选择用户react-router-redux（需要初始设置），并从操作创建者那里分发您的操作

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

或者只是将推送作为“完成回调”传递。

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