Redux＆React路由器：梳理调度和导航（history.push）

Posted 2021-05-05

关于如何使用React Router qazxsw poi和qazxsw poi，我有点无能为力。

换句话说，如果你用Redux的history.push('/route')连接一个组件，你如何在调度某个动作后放置应该被触发的Redux？

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

mapDispatchToProps

正如您所看到的，只要帖子通过history.push('/route')添加到Redux的状态，页面就需要通过history.push移动到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); 。

根据Redux的文档，容器用于更新状态（以及获取数据）。所以，愚蠢的组件不应该放任何像addPostFulfilled。

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

任何建议将被认真考虑。

答案

您可以使用用户react-router-redux（需要初始设置）并从操作创建者发送您的操作

/posts

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

history.push

另一答案

恕我直言，你甚至可以从你的愚蠢组成部分做一个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);

完成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()); }); }, } } 。你可以在addPostFulFilled更新时调用任何生命周期方法。也许，将它添加到this.history.push('/route')。

props

请注意，上述内容仅适用于

1. 您可以通过componentWillReceiveProps跟踪位置变化。（class PostContainer extends React.Component { componentWillReceiveProps(nextProps){ /*Added here*/ if(nextProps.someFlag){ this.props.history.push('/someRoute'); }} ）
2. 您正在使用store，在这种情况下，您将使用Read More包装连接，这将使历史对象在react-router-4中作为道具出现。
3. 应该注意防止不必要的重新渲染并在withRouter中编写必要的逻辑。

如果以上听起来像是一大堆乱码，你可以随时使用PostContainer的shouldComponentUpdate API，它可以在浏览器历史记录中推送新条目。您可以在您选择的任何地方导入，只需推送新路线即可。

详细信息可以在react-router-redux中看到并引用文档

push和replace都包含一个位置描述符，它可以是描述URL的对象或纯字符串URL。这些动作创建器也可以在一个对象中作为routerActions使用，在使用Redux的bindActionCreators（）时可以方便地使用它们。

因此，直接在mapDispatchToProps中使用push，或者将它们作为支柱传递给react-router-redux github pages反应组件中使用。

---

另一答案

更简洁的方法可能是使用React Router的history.push()：

PostContainer

如果成功，<Redirect>将触发州的变化。它应该将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); 更改为true，以便您将被重定向到帖子的页面。

要避免所有这些嵌套回调，您可以遵循addPost并处理中间件中的逻辑：

userJustAddedAPostRightNow

然后，在成功之后，qazxsw poi动作将通过你的减少改变qazxsw poi的值。