React Redux-如何在Redux存储中存储数据后重定向页面

Question

我正在尝试一个react redux示例代码，我想在单击"添加课程"后将课程添加到一个表单中，我想更新存储并重定向到包含课程列表的新页面。

但由于某些原因，重定向发生在调用redux操作创建者之后。它停留在同一页。

有什么想法可以将结果重定向到另一个页面吗？

import React from "react";
import { connect } from "react-redux";
import * as courseActions from "../../redux/actions/courseActions";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import history from './history'

class CoursesPage extends React.Component {
state = {
course: {
title: "",
},
};
handleSubmit = (event) => {
event.preventDefault();
this.props.actions.loadCourses.createCourse(this.state.course).then(() => {
alert('Inside Promise') 
history.push('/AllCourses'); //This doesn't get executed.
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<h2>Courses</h2>
<h3>Add Course</h3>
<input type="submit" value="Add Course" />
{this.props.courses.map((course) => (
<div key={course.title}>{course.title}</div>
))}
</form>
<hr />

</div>
);
}
}
CoursesPage.propTypes = {
courses: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired,
};
function mapStateToProps(state) {
return {
courses: state.courses,
};
}
function mapDispatchToProps(dispatch) {
return {
actions: {
loadCourses: bindActionCreators(courseActions, dispatch),
},
};
}
export default connect(mapStateToProps, mapDispatchToProps)(CoursesPage);

Action Code:
import * as types from "./actionTypes";
export function createCourse(course) {
return { type: types.CREATE_COURSE, course };
}

Reducer:
import * as types from "../actions/actionTypes";
export default function courseReducer(state = [], action) {
debugger;
switch (action.type) {
case types.CREATE_COURSE:
return [...state, { ...action.course }];
default:
return state;
}
}
history.js
import createHistory from 'history/createHashHistory'
export default createHistory()

Answer 1

您可以创建一个自定义中间件来实现这一点：

const hasAddedData = (state) => {
// Your checks    
}
const redirectMiddleware = history => storeAPI => next => action => {
console.log('dispatching', action)
const result = next(action);
// If the action is the one you want to trigger the redirect (action.type)
// and the state pass the checks (storeAPI.getState()),
// do the redirect.
//
// This would be like:
if (action.type === types.CREATE_COURSE && hasAddedData(storeAPI.getState())) {
history.push(destinationPath);
}
// You must return the result of next(action) to avoid breaking Redux.
return result;
}

无论您在哪里创建Redux商店：

// history should already be provided by React Router.
const middlewareEnhancer = applyMiddleware(redirectMiddleware(history))
const store = createStore(yourRootReducer, middlewareEnhancer)

如果您也需要检查上一个状态，只需在运行下一个(操作(之前用storeAPI.getState((设置一个常量即可。您可以使用其他重定向检查或其他操作所需的场景来扩展中间件。

警告：我想给你香草代码解决方案，但请记住这三件事：

• 这可能是一个更好的任务，由库(检查连接的反应路由器(来完成
• 此外，您可以使用一个广泛接受的中间件库，如redux saga，而不是为特定于操作的任务定制中间件
• 想想你的应用程序工作流程。是否需要其他状态属性(完成标志、选择属性…(？所有CREATE_COURSE操作都将重定向还是仅重定向其中的一小部分？一个特定的REDIRECT行动会让你的事情变得更容易吗？你真的需要一个命令式重定向吗？或者，有了正确的状态结构，有可能使用React Router组件进行声明驱动重定向吗