关于如何使用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请注意，上述内容仅适用于
componentWillReceiveProps跟踪位置变化。（class PostContainer extends React.Component {
componentWillReceiveProps(nextProps){
/*Added here*/
if(nextProps.someFlag){ this.props.history.push('/someRoute');
}}
）store，在这种情况下，您将使用Read More包装连接，这将使历史对象在react-router-4中作为道具出现。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的值。